Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Colby Work
Colby Work
20,422 Points

Background color of elements break on scroll

Can someone take a look at this, and help me understand what's going on?: http://www.eugene-mower-man.com/

On mobile devices, the background color doesn't fit all the way across the screen...it stops at around 80%. On desktops, it works just fine. However, if you shrink the browser, and then SCROLL to the right, the whitespace is there. I have 100% width on my HTML and I just can't figure out why this is happening, especially on the mobile device.

This is NOT supposed to be a responsive site, I just want it to fit in the mobile browser though like most other websites.

1 Answer

Yulia Markina
Yulia Markina
12,616 Points

Hi Colby! You can fix this by adding width to the #page ID in pixels because you have width in px for the .container

#page {
 width: 1300px;
 overflow: scroll;
}
Colby Work
Colby Work
20,422 Points

width doesn't work, since the background colors are set on the child element but min-width does the trick. this gets me closer, definitely. i spent forever and got the same results setting the #page div to inline-block and min-width 100%. Not sure if one method is better than the other, but oh well. It still looks a little off on the mobile, but it's not a responsive site, so...

Yulia Markina
Yulia Markina
12,616 Points

I'm glad you got closer :) yeah min-width looks better! Considering the fact that the layout is fixed, you have to compromise anyway. Probably playing with different widths will help.

Good luck with your good-looking website! :)

Colby Work
Colby Work
20,422 Points

thank you for the help!