CODEWITHSUNDEEP
csszurb-foundation
Liron Harel
Liron Harel

Reputation: 11247

Changing Breakpoint for Zurb Foundation Grid in CSS

How can I change the breakpoint for Zurb Foundation block via css not SaSS?

For example, in my code I defined large-block-grid-3 and medium-block-grid-2, but the way it looks on small is not for my liking and I want it to break in different width. I want to be able to declare one column grid, but only for a specific custom width.

Upvotes: 1

Views: 2134

Answers (2)

Rijo
Rijo

Reputation: 2718

You can override Foundation 6 breakpoints variable in _settings.scss like the following:

$breakpoints: (
  small: 0,
  medium: 768px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Upvotes: 2

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

In the css you would search for all references to the media query you want to update and change it as needed. The media queries in _settings.css are:

Media Query Ranges

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);

Remember before Foundation 5 there wasn't a "medium" class concept.

Thanks to this post on Zurb University for the information.

EDIT: Find these media queries and change the class you want, everywhere it appears. This, of course, is easier if you're running scss. You could also try making your own media query and override the class you want with your attributes; your css must come after the foundation css for this to work. 

@media only screen and (min-width: 40.063em)

@media only screen and (min-width: 64.063em)

@media only screen and (min-width: 90.063em)

@media only screen and (min-width: 120.063em)

Upvotes: 2

Related Questions