I am not a newbie when it comes to website design/build but have never done anything to make it responsive. What I mean by that is just a simple static website (I don't plan any js).

 

On the main page there will be three images inline:

 

ImageImageImage

 

However if the website is accessed from a mobile device (or a browser under some specific width), it should render those images as follows:

 

Image

Image

Image (the images will be much smaller than the original ones)

 

 

Similarly some of the pages will be structured as follows:

 

 

Image TextTextText

 

... and from a mobile device:

 

Image

Text

Text

Text

 

 

In the past I would normally start off HTML5 boilerplate.

 

Could you point to some tutorial how to adapt it to achieve what I described above or any hints how to start?

 

Would it consist of 2 separate stylesheets?

 

I don't know if that's relevant but I'd also been playing with sass and would like to use it in this project (for the first time)?

 

 

Thank you for your guidance

 

Have a read of this: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox (as suggested above) may not be the best tool for you to use for such simple requirements. Instead you could try building your site with CSS media queries. Imagine if your images are in a row on a large screen device and their width is 33% on inline-block, then when your CSS detects a smaller screen width they change to width 100% and display:block, or something similar.

 

This is how larger framework packages deal with responsive design. Alternatively, if you don't want to spend time developing a custom framework from scratch every time you start a site, just use Bootstrap3 or Foundation5 and learn how their systems work.

 

The flex model has uses but in my experience, the cross-platform compatibility (mostly with apple devices) is more trouble than its worth at the time of writing.

Ok, thanks everyone. I'll look into the suggested options and post back if I have any problems.

Flexbox has limited browser compatability so the time has not yet come to fully utilise it... yet!

Learn about the css box model and how floats work. I would recommend a framework only when you understand thr core concepts of responsive layouts.

I think CSS media queries would be good for your website. You can also go with wordpress/magento also.Flexbox is not suitable for you.

Edited August 12, 201412 yr by effortsunlimited

Go with something which takes less time and efforts.

Something like this should do

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
 

.boxes .box {
  display: inline-block;
}

@media (max-width:960px) {
  .boxes .box {
    display: block;
  }
}
 

 

Something like this should do

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
 

.boxes .box {
  display: inline-block;
}

@media screen and (max-width:960px) {
  .boxes .box {
    display: block;
  }
}
 

 

You'll probably want to use '@media screen' unless of course you want to target all media types.

 

You'll probably want to use '@media screen' unless of course you want to target all media types.

 

Defintley. I only mean the code as a guide anyway - there's a few things left out. The .box width for example