Menu icon Foundation
Layout help

Hi,

This ones got me stumped so far! How would I create the following layout for the respective screen sizes?

Thanks.

 

 layout

 

 

 

layout

Hi,

This ones got me stumped so far! How would I create the following layout for the respective screen sizes?

Thanks.

 

 layout

 

 

 

This post has been closed. No new replies can be added.

Alan Brady almost 3 years ago

If you take 1&2 as one div and 3&4 as another div (small-12 medium-12 large-6 columns)

Within each of those, create two more divs (small-12 medium-12 large-6 columns)

 

Val Ery almost 3 years ago

 Hi!

Alan! A little bit wrong...

<div class="row">
  <div class="medium-6 columns">
    <div class="row">
      <div class="large-6 columns">
      </div>
      <div class="large-6 columns">
      </div>
    </div>
  </div>
  <div class="medium-6 columns">
    <div class="row">
      <div class="large-6 columns">
      </div>
      <div class="large-6 columns">
      </div>
    </div>
  </div>
</div>

See it in action ... - http://codepen.io/Val_Ery/pen/GjmBvd

Alan Brady almost 3 years ago

Apologies. I copied the same one in twice. That was a bit stupid.

Son of Spectrum almost 3 years ago

@Alan @Val

Thanks - that works. @val thanks for the codepen. I will have to learn how to nest like an Osprey!