Menu icon Foundation
row with background-color spanning window width

I want a row whose background color spans the width of the window. The following works but is cumbersome:

<div style="background-color:#CCCCCC">
    <div class="row>
        <div class="small-12 columns">Content here...</div>"
    </div>"
</div>
            

         

I have to define 3 div's. In my outer-most div, I'd really like to specify a class that gives me the padding and margins that result from the inner row and columns, but allows the background color to span the full window width.

I tried simply omitting the row or columns div but then I don't get consistent padding with other rows where I am using Foundation's grid.

I could define a new class "wide-row" and set the padding to whatever values using a row and columns div ends up providing. However, I'm not sure what scss variables to use for these settings and I'm not sure what all needs to be set: padding, margin, something else?

Any ideas on the best way to accomplish this? The end goal is to have exactly what the normal grid already provides but allow the background color of a row to span the entire window width.

row

I want a row whose background color spans the width of the window. The following works but is cumbersome:

<div style="background-color:#CCCCCC">
    <div class="row>
        <div class="small-12 columns">Content here...</div>"
    </div>"
</div>
            

         

I have to define 3 div's. In my outer-most div, I'd really like to specify a class that gives me the padding and margins that result from the inner row and columns, but allows the background color to span the full window width.

I tried simply omitting the row or columns div but then I don't get consistent padding with other rows where I am using Foundation's grid.

I could define a new class "wide-row" and set the padding to whatever values using a row and columns div ends up providing. However, I'm not sure what scss variables to use for these settings and I'm not sure what all needs to be set: padding, margin, something else?

Any ideas on the best way to accomplish this? The end goal is to have exactly what the normal grid already provides but allow the background color of a row to span the entire window width.

Trying To Be Helpful over 5 years ago

I just wrap my row in another <div> that contains a "full-width" class and whatever bg color class I want.

I have footers that go full width already, so I just style their class or id to whatever background color I want (plus any extra padding on top and bottom) and it works fine.

What you did is fine, just maybe use a class instead of inline-style for better management. GOOD LUCK!

James Stone over 5 years ago

I agree, there is no simple way to avoid having a wrapping div, or other html5 tag where you set that color. I use the exact same technique on my site, although I set a class and place use sass/scss/css as Trying suggests.

Matt Edwards over 5 years ago

I think that is about as good as you are going to get.

The issue you will run into is that a .row is what will have the max-width and margin: 0 auto applied, so that on a screen that is say 2000px, your content is centered in the middle.

The columns that expand to fill the full width of the row.

The extra element you want, with the background color needs possibly expand wider than the row.

Does that make sense? So you will always need an extra element.