Menu icon Foundation
how to extend background color to full browser width

Apologies for utter newbie nature of this question - but please help if you've got time! How do I create a section style that will extend the background colour to the full width of the browser? I'm sure its just a simple bit of CSS , and I'm quie new to this, just workking it out as I go along, so any suggestions would be really helpful.
thank you

background-colorcssmax-widthF6

Apologies for utter newbie nature of this question - but please help if you've got time! How do I create a section style that will extend the background colour to the full width of the browser? I'm sure its just a simple bit of CSS , and I'm quie new to this, just workking it out as I go along, so any suggestions would be really helpful.
thank you

Travis Fulton almost 4 years ago

Just wrap another div around .row and apply a background color to that.

Travis Fulton almost 4 years ago

Inspect the first section with a green background that says, "Banking for Innovation" under the main image on this site:
https://innovation.firstrepublic.com/

You'll see that I have .bg-green wrapped around a .row with just a background set.
You may have something else going on if this isn't immediately working for you. Do you have your project up anywhere?

Travis Fulton almost 4 years ago

Yeah, it's just hard not seeing the code/site itself. Sounds like there's some extra div that's wrapping the footer that has a width applied to it. Make sure that the footer is truly on it's own.

Travis Fulton almost 4 years ago

Hmmm, are you using Foundation 6 with all the partials stuff? Sounds fishy that the 'stray' closing div would fix it and not break anything else if it really were a stray. By the way, the
HTML
</div>

doesn't show on this forum post, but does on Outlook (which is how I know what you're talking about.)

Grab the source of the page (the final code that gets generated) and run it through https://validator.w3.org/ with and without the stray. That will tell you for sure if it belongs there or not. If you're on a mac in Chrome opt+cmd+u will bring up the source code.

Good luck!

Max Drake almost 4 years ago

Yes!!! Thank you...
I found a coding error when I ran it through the validator :

<div class="clearfix" />

whereas it should have been:

<div class="clearfix"></div>

Rafi Benkual almost 4 years ago

@Travis Fulton Great suggestions!

@Max Drake Glad you got it! Make sure to hit the "helpful" button when people help you :)

Max Drake almost 4 years ago

Thanks Travis, I get that. But how would I style that div?
My CSS presently looks like this:
.green-bg {
background-color: #B7CBC1;
width: 100%; }

.green {
padding-left: 1rem; }
.green h3 {
font-size: 1.0rem;
text-transform: uppercase;
text-color: #FFF6D5;
text-shadow: 0px 1px 0px #FFF6D5;
border-bottom: 2px;
border-color: #FFF6D5; }
.green h3 a {
text-color: #00371D; }
the html is this:

```



But the background colour is still not extending to full screen width

Max Drake almost 4 years ago

Thanks Travis. That hasn't really helped me though, and unfortunately I don't have the project up anywhere as am just prototyping locally at the moment.
I just can't seem to work it out with Foundation. To get my footer spreading right across the full width I've resorted to using the top-bar class, but don't want to have to use that the whole time just to get the background colour to spread to full screen width.

Max Drake almost 4 years ago

That's weird.
I just put a stray closing div before the section that I was trying to style, and the the background color setting now works. The stray closing divis genuinely stray, doesn't relate to anything.