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.
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)
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.
Uncommenting $row-width: rem-calc(1000);
worked for me
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With