Menu icon Foundation
more than 12 col in a row for small ?

I found out the easiest way to display content on small screen was using entire row for each column.
So i mainly use this code below.

But it transform columns in rows since columns are full size.
And the total is 36, not 12. So is it technically "clean" ?
On the other hand it is almost never efficient to split screen in 3 columns for small screens.

Do you suggest smarter way to do this ?

(edit oct 8): i have to display 3 different content side by side on medium and large, and vertically on small.

<div class="row" data-equalizer >
class="small-12 medium-4 columns" 
class="small-12 medium-4 columns" 
class="small-12 medium-4 columns" 
</div>
            

         

smallcolumnrow

I found out the easiest way to display content on small screen was using entire row for each column.
So i mainly use this code below.

But it transform columns in rows since columns are full size.
And the total is 36, not 12. So is it technically "clean" ?
On the other hand it is almost never efficient to split screen in 3 columns for small screens.

Do you suggest smarter way to do this ?

(edit oct 8): i have to display 3 different content side by side on medium and large, and vertically on small.

<div class="row" data-equalizer >
class="small-12 medium-4 columns" 
class="small-12 medium-4 columns" 
class="small-12 medium-4 columns" 
</div>
            

         

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

Chris M about 5 years ago

Hey, not sure I'm understanding what you mean. If you wanted to have one column in small, you could do:

<div class="row">
<div class="small-12 columns">


</div>
</div>

And the content inside would take up the entire screen at small sizes. Or:

<div class="row">
<div class="small-12 medium-6 large-4 columns ">


</div>
</div>

Would result in the content taking up the full width in small, half the width at medium screens and 1/3 of the screen at large.

Sorry if I've misunderstood what you meant!

Djml Pro about 5 years ago

Thanks.
you misunderstood but it's my fault, and i just updated the first post accordingly.

I have 3 different texts to display :
in a single row and side by side on medium and large,
vertically on small screen.

It works well with my code, but semantically im not sure im doing the right thing for small screen.
Having 36 columns in a single row sounds bizarre.

So my question is :
Is it normal ?

Chris M about 5 years ago

Hey,

I understand now! Yes that's correct, having the layout like this:

<div class="row">
     <div class="small-12 medium-4 columns ">
          Stuff
     </div>
     <div class="small-12 medium-4 columns ">
          Stuff
     </div>
     <div class="small-12 medium-4 columns ">
          Stuff
     </div>
</div>

Would result in Stuff lining up next to each other on medium:

Stuff Stuff Stuff

And stacked on top of each other on small:

Stuff
Stuff
Stuff

And that is the correct way to layout your code. Even if my explanation did get a bit stuffy.

You never have 36 columns in one row - rather, a row by default ALWAYS has 12 columns, and you're simply stating "on small screens, this content takes up the width of all 12 columns".

Hope this helps! :)

Djml Pro about 5 years ago

Now it's clear, Thank You !