Menu icon Foundation
Change .row width based on screen width (Foundation 6)

Hi,

I'm having some difficulty figuring out how to change the width of a .row based on the screen width. I'm using the flex-grid styles.

In my current workflow I have my own _global.scss file which is imported into foundation.scss just after the original _global.scss to override it. This works well so far.

Based on the instructions here, http://foundation.zurb.com/sites/docs/media-queries.html, I have copied the $breakpoints variable to my _globals.scss file and added the xlarge and xxlarge breakpoints to the $breakpoint-classes variable:

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

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

Now, I need the .row to grow and shrink in width according to the active breakpoint. I cannot find a built-in mixin to accomplish this, and I would be extremely surprised if I have to do this manually. I assumed there would be an accompanying variable like this:

$row-width: (
  small: 0,
  medium: 400px,
  large: 800px,
  xlarge: 1000px,
  xxlarge: 1200px,
);

...that would work with the $breakpoint variable to specify .row width based on screen width.

I'm probably missing something obvious. Can anyone provide a solution?

foundation 6breakpointsmedia-queries.row

Hi,

I'm having some difficulty figuring out how to change the width of a .row based on the screen width. I'm using the flex-grid styles.

In my current workflow I have my own _global.scss file which is imported into foundation.scss just after the original _global.scss to override it. This works well so far.

Based on the instructions here, http://foundation.zurb.com/sites/docs/media-queries.html, I have copied the $breakpoints variable to my _globals.scss file and added the xlarge and xxlarge breakpoints to the $breakpoint-classes variable:

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

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

Now, I need the .row to grow and shrink in width according to the active breakpoint. I cannot find a built-in mixin to accomplish this, and I would be extremely surprised if I have to do this manually. I assumed there would be an accompanying variable like this:

$row-width: (
  small: 0,
  medium: 400px,
  large: 800px,
  xlarge: 1000px,
  xxlarge: 1200px,
);

...that would work with the $breakpoint variable to specify .row width based on screen width.

I'm probably missing something obvious. Can anyone provide a solution?

James Stone almost 4 years ago

You need to change a variable in your _settings.scss file:

$grid-row-width Number $global-width

The maximum width of a row.

This is independent of breakpoints. Think of it as max-width being set on the row. Meaning if the viewport is wider, then it will be a specific amount. If the viewport is smaller then it will be 100% because it is less than this amount.

This is independent of the breakpoints and media queries, but you could potentially change that by overriding it in your own css. With say a different max-width on the .row for different breakpoints.

Ron Wade almost 4 years ago

Thanks James,

I was hoping that Foundation provided a shortcut mixin for that, as I described above. That is how it's done in bootstrap 3 or 4 (don't remember which) and it's really handy.

But adding the styles manually won't be too much trouble, since I'm using flex-grid, I assume.

Ron Wade almost 4 years ago

In a related note, _settings.scss has no effect on my Foundation 6 styles. I created a new post about that here: http://foundation.zurb.com/forum/posts/36688-

So I had to drop the $global-width override in my own _global.scss file which I described above (which is what I prefer to do anyway).