Jay Taylor's notes
back to listing indexzurb foundation is it possible to have full row width
[web search]
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it. Any poiinters much appreciated.
|
|||||||||
protected by Community♦ Apr 23 '14 at 16:20This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site. |
|||||||||
|
|||||||||
My first post! I just stumbled onto Foundation myself, today. I think this will work...
Strangely enough, I had a similar question to yours. I want to make a row take up the entire height of the page for a fullscreen JS app.
|
|||||||||||||||||||||||||||||||||
|
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
|
|||||||||||||||||||||||||||
|
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
|
|||||||||||||||||||||
|
If you're using Zurb Foundation Framework, simply remove the
|
|||||||||||||||
|
I completely disagree with the answer. You shouldn't have to use !important Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/ You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
|
|||
Use "Section" as in:
Then, assign an ID to the section and use that for your background.
|
|||||||||
|
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me). As Foundation is using REM units, it would be best to alter
You can see that it is used like this even in documentation page of Zurb Foundation (they altered
|
|||
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner For a true edge-to-edge, full width content, add this to your CSS.
Simply add
|
||||
Just override the
this works for me :)
|
|||
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
|
|||
|
|||
If you're using sass, this is a better way:
|
|||
If you don't give it the "row" class and put columns inside it works on a 100% width
|
|||
I am not sure if I am missing something, but I had to add a
|
||||
yes, just use like this:
|
|||||||||
|
Your Answer
Technology | Life / Arts | Culture / Recreation | Science | Other | ||
---|---|---|---|---|---|---|