Search code examples
sasszurb-foundationzurb-foundation-6

$grid-margin-gutters from Foundation Zurb does not work as expected

In a project that I'm working at, I'm trying to achieve simple thing with Zurb Foundation 6 for Sites. Over 1280px grid gutters should be 20px, under 1280px grid gutters should be 10px. I've changed settings.scss as on the screenshot below, but anyway it doesn't work. Anybody faced the same problem in past?? I want to have in the $grid-margin-gutters map values for large and xlarge breakpoints.

enter image description here

Solution

  • For someone facing the same problem. The answer is: if this $grid-margin-gutters does not work as you expect - please make sure that inside a $grid-margin-gutters map you are putting all the breakpoints starting from the smallest one. So follow the pattern: 

    $grid-margin-gutters: (
   small: 10px, 
   medium: 10px, 
   large: 20px,
   yourCustomBreakpoint: 30px
);

    And don't forget to add these custom breakpoints inside variable $breakpoint-classes: like the following: 

    $breakpoint-classes: (small medium large yourCustomBreakpoint xxlarge);

    Works as expected right now, compile without any errors.