When zoomed in background doesn't carry.

[benjamin.morgan]

I have my content and other divs that are doing this 100% and I have a background color on it. However when i zoom in and scroll over it is a giant white space. The only way to fix it is to add a background color to the body but then it doesn't help the footer, header or navigation. What can I do to fix. Actual website is in the footer.

This is what I'm talking about.

 

[CaldwellYSR]

You need to set a min-width that's big enough to accomodate the content. Specifically...

.content {
  min-width: 960px;
}

tested it in firebug on http://codedoorwebdesign.com/index.html and it fixed the issue. There's no reason to define width: 100% because it gets that by default so if you just change that to min-width: 960px then it sorts everything out.

Another *better* solution would be to go responsive. Check this site out for a quick tutorial on it. This way you shouldn't ever have to scroll horizontally anymore.

 

[benjamin.morgan]

Thanks, the min-width fixed it when i added it to content and footer but it messed it up when i added it to header and nav? Any idea why that is?

EDIT: It worked when I added it to the body element. I will definitely be reading up on the responsive media queries.

 

[CaldwellYSR]

Thanks, the min-width fixed it when i added it to content and footer but it messed it up when i added it to header and nav? Any idea why that is?

EDIT: It worked when I added it to the body element. I will definitely be reading up on the responsive media queries.

interesting when I added it to .content it fixed it for all of the elements. I didn't test all browsers though that was just Chrome.