How can I increase the row width in zurb Foundation?

Question

I am learning Zurb foundation, and my question is that how can I increase the default width of the row in the framework.

Like a 960 grid system has 960 px. How can I increase the wish of row to maybe 1200px, so should I add a custom stylesheet?

Solution 1

You don't have to use !important. Just place your new CSS—say app.css—below the foundation.css and use the following:

.row {
    max-width: .px;
}

You can also use another class and add this property so that it won’t conflict with the default row.

Solution 2

Better way is to go to the _settings.scss file of foundation in your project, check online if you don't have _settings.css file or if you don't know its location please. just open and find this

$row-width: rem-calc(980); //change up to what you want

and this upper value will generate row-width like below value i.e 61.25rem.

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 61.25rem;
  width: 100%;
}

but now if you change that row-width from 980 to something like 1280, like below example

$row-width: rem-calc(1280);

then you can see below that my css is generated automatically with the new max-width

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 80rem;
  width: 100%;
}

be careful with that settings because you can change the look and layout of whole website drastically.

Solution 3

Override the max-width property of your .row class, and set it to the width you want.

.row {
    max-width: ...px !important;
}

If you'r using SASS, search for grid variables in the documentation, where you'll find info on how to override row width, gutter width and more.

$row-width: em-calc(1000);

Comments

[Nikolay Shebanov]

Better never use !important and learn about CSS specificity. Smashing mag has a brilliant article about it coding.smashingmagazine.com/2007/07/27/…

[am_]

True, you can always override it by including the .row{} after the Foundation css styles - and thus omitting the !important. Or just use SASS. :) PS. even ZURB uses alot of !important; in their framework - so it can be useful in certain cases.

[vtacreative]

This works, but in my case it also restricted the max width of a full width row, so if you have full width rows in your layout you might want to reset .row.full-width to 100%