tip: deal with foundation layout (for profile's)

[bwakad]

Of topic, or dev topic, anyway's ...To me, foundation is becoming the perfect framework, easy and understandable. And PW it is great to use it for!

But to make a layout (that takes small, medium and large screens into consideration), gave me some trouble using it in combination with PW image display resizing functionality. Foundation just shrinks away the image when put into a specified column. So if the PW resizing is bigger then the calculated foundation column size, it will become verrry small. But Foundation is building from small to large. And I took it the wrong way.

On large screens I would have div's for columns to get a list layout. For example: 3 - 6 - 3.

And I started adding the columns for small in those div's as well. Thinking, on small they will adapt... Wrong! Because they will float left until 12 columns are reached...

So my fist attempt was:

<div class='medium-3 small-12 columns'>content</div>
<div class='medium-3 small-12 columns'>content</div>
<div class='medium-3 small-12 columns'>content</div>

But here's how I do it now (for the first "3" out of 12 columns):

<div class='medium-3 columns'>
   <div class='small-12 columns'>content</div>
   <div class='small-12 columns'>content</div>
   <div class='small-12 columns'>content</div>
</div>

In this last code the medium basically get's ignored on small screens (as if it isn't there). And it will only list the small-12.

Going back to medium screens, the medium get sized to 3 columns as we asked, and the small-12 get sized to full width of the medium-3.

So, now I am just thinking 'containers', and work from inside to outside. Meaning I will always place an image in the smallest container.

[MichaMichaMicha]

Pretty old topic, maybe you figured it out already, but:

You always need a wrapping class row when you use columns.

You code should be:

<div class='row'>
   <div class='medium-3 columns'>
      <div class='row'>
         <div class='small-12 columns'>content</div>
         <div class='small-12 columns'>content</div>
         <div class='small-12 columns'>content</div>
      </div>
   </div>
</div>