Menu icon Foundation
Hardcoded .row max-width in F5?

Hi,

I've been trying to figure out why the class="row" set on my div's doesn't change max-width when hits a different breakpoint. I'd expect that if I resize my window to small screen then the .row max-width will be 40em, when it's medium .row width will change to 64em, and finally when it's large max-width will change to 90em.

But it looks like the row width is the same for all. Isn't that working against RWD? .

I know I can change the max-width under _settings.scss but the .row max-width will be the same for all breakpoints but I'd like the layout to be fluid so that margin on left and right will be proportionate to the screen size (more or less). Is this possible?

- partizan

.rowmax-width_settings.scss

Hi,

I've been trying to figure out why the class="row" set on my div's doesn't change max-width when hits a different breakpoint. I'd expect that if I resize my window to small screen then the .row max-width will be 40em, when it's medium .row width will change to 64em, and finally when it's large max-width will change to 90em.

But it looks like the row width is the same for all. Isn't that working against RWD? .

I know I can change the max-width under _settings.scss but the .row max-width will be the same for all breakpoints but I'd like the layout to be fluid so that margin on left and right will be proportionate to the screen size (more or less). Is this possible?

- partizan

Rafi Benkual about 5 years ago

Usually we will add a class like fw to do this:

.row.fw {
   max-width: 100%;
}

This will make the layout scale full width regardless of screen size. The columns have a gutter of 0.9375rem. Is that what you are referring to?

partizan about 5 years ago

Something like this, but I was hoping that Foundation provides this already and I don't have to create my own classes.

Doesn't the gutter change - shrink for smaller screens and expands for larger screens (as it hits a breakpoint)?