I'm attempting to change the maximum row width from 1200px to 1560px however I'm having trouble finding anyway to do this. I'm using SASS to compile. I'm assuming that settings just need to be changed in the settings.scss file however any changes I make seem to have no effect on row width.
I saw a breakpoints variable here
$breakpoints: (
small: 0,
medium: 1200px,
large: 1560px,
xlarge: 1440px,
xxlarge: 1440px,
);
There I changed large: from 1200px to 1560px and changed the other breakpoints as well.
I also changed the $global-width here
$global-width: rem-calc(1560);
None of these seemed to have had any effect. I made sure it was included in my main.scss file.
@import "vendors/foundation/settings";
@import "base/colors";
@import "base/global";
@import "base/typography";
My folder structure is
-_main.scss
-base
-_colors.scss
-_global.scss
-_typography.scss
-vendors
-foundation
-_settings.scss
Also I double checked and the effects of all the other scss files are working just fine. I'm getting no errors.
UPDATE: I also made sure that the settings import happened after my base foundation includes
@import '../bower_components/foundation-sites/scss/util/util';
@import '../bower_components/foundation-sites/scss/foundation.scss';
@include foundation-global-styles;
@include foundation-grid;
All occur before the rest of my imports.
How do you change the max width or rows/breakpoints in SASS in Foundation 6
UPDATE: I also added a test variable
$testcolor: #523432;
and used it elsewhere in base/colors like so
* { border: 1px solid $testcolor;}
And that works just fine.
Turns out it had to do with the order I imported. The _settings.scss file needs to be imported before the base _foundation.scss file.