Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zurb Foundation 3 - Full Width Sections & Change Max Width?

Im using ZURB Foundation 3 on a project of mine. I love grid systems and responsive sites but my issue is I still strongly believe they should be built wider then 1000px.

I have a few questions:

1) First off I would love to make certain sections (divs) full width. Now I have read I can just replace <div class="row"> with <div class="container"> for instance and it will generate that effect. Now for some reason this does not feel right, should I just create my own class thats full width, or what would be the proper way to do this?

2) I would love to have it based for a larger resolution, maybe a max 1440px wide or even a fluid 100% full width. How could I go about doing this, and/or is Foundation not the correct framework for me? I love the fact it comes with all the templates so is super quick and friendly to do mockups.

Thanks in advance.

like image 362
matt Avatar asked Oct 11 '12 17:10

matt


3 Answers

Update: Please stop down voting this post. The framework has changed significantly since the question was answered. If you are using Foundation 4 or higher, please see the updated answers and up vote them.

For Early versions of Foundation 3 only Add the following override to your CSS (This must appear after or at the end of foundation.css)

.row {
     width: 100%;
}

This will override the default with of the framework and make the design go full screen. Feel free to change this value to suit your needs.

There is also a customized download available at http://foundation.zurb.com/download.php (which probably does the same thing, overrides or replaces .row width)

like image 195
Ed Charbeneau Avatar answered Nov 05 '22 15:11

Ed Charbeneau


Editing/overriding foundation is easy. In Foundation 4 you can edit your _settings.scss file. Uncomment out $row-width: emCalc(some_number.px); to a row-width you'd like to use.

like image 25
BisonAVC Avatar answered Nov 05 '22 15:11

BisonAVC


Uncommenting $row-width: rem-calc(1000); worked for me

like image 1
AnkitG Avatar answered Nov 05 '22 15:11

AnkitG