7

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?

4 Answers 4

12

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.

1
  • 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% Feb 13, 2016 at 7:02
5

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.

4

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);
2
  • 1
    Better never use !important and learn about CSS specificity. Smashing mag has a brilliant article about it coding.smashingmagazine.com/2007/07/27/… Mar 17, 2014 at 9:54
  • 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.
    – am_
    Mar 17, 2014 at 16:26
-1

Foundation 6 introduces the class .expanded to make the width fluid: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

It still results in problems with the padding though, no idea how to fix this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.