Menu icon Foundation
How to change F5 grid wrapper width?

When i make a row and blocks, they are not full width of the browser screen. How can i change the container width that wraps rows and puts them in middle of the screen?

rowgridFoundation 5

When i make a row and blocks, they are not full width of the browser screen. How can i change the container width that wraps rows and puts them in middle of the screen?

Rafi Benkual over 5 years ago

If you need to change grid width, you can download a custom version here http://foundation.zurb.com/develop/download.html

or
In foundation.css line 163

.row {
  max-width: 62.5rem;
}

Just make this as wide as you need it.
Then .large-12 will fit it 100%

Steve Trask almost 6 years ago

I agree override will be the better option rather than amend

Tim Martin almost 6 years ago

I add the following rule to my style.css which comes after foundation.min.css.

.row { max-width: 1080px; }

Obviously change this to 100% or whatever you want the max-width to be.

Steve Trask almost 6 years ago

If you are using sass change the row width on line 33 as below

$row-width: 100%;

and if in css chnage in foundation.css line 93 comment out

 /** max-width: 62.5em; **/