Menu icon Foundation
Adding breakpoints for the grid

Hi,

is it possible to add some more breeakpoints for smaller devices? I think of 480px and 320px. There are breakpoints for large devices, but the smallest one is 640px. Is there a good way to do that?

breakpointsgrid

Hi,

is it possible to add some more breeakpoints for smaller devices? I think of 480px and 320px. There are breakpoints for large devices, but the smallest one is 640px. Is there a good way to do that?

Rafi Benkual about 4 years ago

Looks like this has been answered before here: http://foundation.zurb.com/forum/posts/19137-additional-breakpoints

Alex about 4 years ago

Hi,

thank you. I also need some classes to work with the grid. I forgot this to write in my first post. Do you know how can i create the classes for the smaller breakpoints? (e. xsmall- or xxsmall)

Rafi Benkual about 4 years ago

There is a mixin you can use:
Here it is https://github.com/zurb/foundation/blob/master/scss/foundation/components/_grid.scss#L152
You'd nest it inside of a media query.

Something like

@media (min-width: 200px) {
  @include grid-html-classes('verysmall');
}

Alex about 4 years ago

Hi Rafi,

i have still 1 question. If i want to add a new breakpoint and new classes with the mixin (grid and block-grid) do i have to copy the whole code from _grid.scss to my custom grid file and then modify the code in my custom file?

Until now i thougt i could only add the additional code to my custom grid but this don't work, because i overwrite some styles.

// from foundation
@media (min-width: 640px) {
  @include grid-html-classes('small');
}

//my custom grid file
@media (min-width: 200px) {
  @include grid-html-classes('verysmall');
}

My definition should come before the mixin of foundation, but this only works if i copy the whole code. Is there a better way of doing that?