Menu icon Foundation
medium-offset exclusively for medium?

Hi everyone,

One thing that has been bugging me for a while is why whenever I set medium-offset-X to a column, it also applies it to all the large queries forcing me to also add the class large-offset-0. But shouldn't the medium-offset-X class be exclusively for medium sizes? Why does it also affects large sizes?

 

Greets!

sitescolumnsgridcolumnmedium-offsetoffset

Hi everyone,

One thing that has been bugging me for a while is why whenever I set medium-offset-X to a column, it also applies it to all the large queries forcing me to also add the class large-offset-0. But shouldn't the medium-offset-X class be exclusively for medium sizes? Why does it also affects large sizes?

 

Greets!

Jacob Brooks about 3 years ago

The way Foundation is coded causes breakpoint specific classes to be added from Small - Medium - Large. This allows for much more flexibility when coding (but sometimes seems like its more code than needed.) A great way to think about it is at the core of Foundation. Column sizes are applied the same way. If you simply put:

<div class="row">
   <div class="small-12 columns">
       your content here....
   </div>
</div>

You would have a 12-column width for Small - Medium - and Large screen sizes. its not until you specify your Medium and/or Large sizes *after* your Small declaration, that you can get different sized columns on different sized screens.

Having to type the 'large-offset-0' can seem annoying, but the ability to change grids/placement on any screen size is a pretty helpful/useful feature.

Hope that helps explain it a little bit. Let me know if you have any questions.

 

Jacob