zurb foundation is it possible to have full row width

css html responsive-design zurb-foundation grid-system
Chou One picture Chou One · Aug 1, 2012 · Viewed 67.2k times · Source

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 

class="row navigation"
class="row footer"

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.

Answer

nikolasleblanc picture nikolasleblanc · Oct 19, 2012

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.

<header>
    This will span the full width of the page
</header>
<div class="row">
    <div class="twelve columns">
        This text will flow within all typical padding and margins
    </div>
</div>
<footer>
    This will span the full width of the page
    <div class="row">
        <div class="twelve columns">
            This text will flow within all typical padding and margins
        </div>
    </div>
</footer>

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More