Menu icon Foundation
Remove the medium grid

Hello,

What is the best way to remove the medium grid? I want to show the large grid instead. I'm using the css version of Foundation.

Thank you

gridcss

Hello,

What is the best way to remove the medium grid? I want to show the large grid instead. I'm using the css version of Foundation.

Thank you

Marc McGee over 5 years ago

What do you mean by "remove medium grid'? Are you referring to changing the break points. Change break points with the media queries—but probably not recommended.

I typically have been working with all large except where I want specific things to display in a certain way—at which point, I will utilized either the small or medium classes in combination with the Show and Hide features.

ndh over 5 years ago

I guess I mean the medium breakpoints. I only want two versions of the site, one for small devices and all others get the large site.

Karl Ward over 5 years ago

You don't need to remove anything ... Just don't use the the medium- classes at all ... In the following example, the grid will break into 3 columns on large screens. Anything below large (including medium- screens), will display with the mobile(default) layout:

<div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
</div>

As stated in the docs: Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

Another example showing "two versions of the website", where medium is ignored and simply will inherit the small- layout:

<div class="row">
  <div class="small-6 large-3 columns">...</div>
  <div class="small-6 large-3 columns">...</div>
  <div class="small-6 large-3 columns">...</div>
  <div class="small-6 large-3 columns">...</div>
</div>

The above will produce 4 columns on large screens, and 2x2 columns on small screens (and medium, although thats not a category since its not defined, and will just go under "small").

ndh over 5 years ago

My site was developed using large classes only. I think it would take a long time to update using your suggestion. Probably not ideal but I think that it may be an easier path for me to change the break points.

Asif over 5 years ago

in order not to use medium you will end up using medium :)

find and replace "large-1, large-2 ........" to "medium-1, medium-2....."

by this what you are saying is that for medium or large use this. so this will be effective for medium and large screens automatically, thereby eliminating medium.

This is a theory, I think this should work. let me know if it does.

-Asif

ndh over 5 years ago

According to the docs you change the media queries with SASS. I'm looking to do the same for CSS. I want to change the large from 64.063em, 90em) to (40.063em, 64em);

Customize With Sass
Media queries can be easily customized by changing the variable values in _settings.scss.

SCSS

// Here we define the lower and upper bounds for each media size
$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); /
641px, 1024px /
$large-range: (64.063em, 90em); /
1025px, 1440px /
$xlarge-range: (90.063em, 120em); /
1441px, 1920px /
$xxlarge-range: (120.063em); /
1921px */

Bryan Leaman over 5 years ago

I think Asif's response will work properly. What I did was wherever I had "large-n small-m columns" I changed it to "large-n medium-n small-m columns" to duplicate the large grid layout to the medium grid. And on a couple key pages I made slight variations between small & large, which is wonderful to be able to do out-of-the-box!
--Bryan