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
Julian McNeill
9,445 PointsWebsite wont reach edge of web browser at certain media query breakpoints!
As soon as my site goes to 1024 width the bottom scrollbar pops up allowing scrolling to the right showing white space. My header spans the entire browser window but im still getting white space. I've got the right divs with width: 100% and I've also tried:
html, body{
padding: 0;
margin: 0;
}
but still no luck and also installed normalize.css. What could be the problem?
3 Answers
Guil Hernandez
Treehouse TeacherCan you please post more examples of your code, or a link to the project? Thanks!
Julian McNeill
9,445 PointsI fixed the problem by using: body{ overflow-x: hidden; }
but I'm wondering why it was happening so it doesn't happen in another project here is some code:
@media (max-width: 1024px ){
.header{height: 100px;}
#ani{font-size: 62px; width: 700px; margin-top: 20px;}
.nav{font-size: 24px;}
.logo{ margin-top: -80px;}
.logo img{width:70px; height: 70px;}
.bar-container{margin-left: 600px; margin-top: -380px;}
.box{width: 250px;}
.bio{margin: 20px 200px;}
.bio p{margin-top: 10px; margin-left: -60px; font-size: 12px; line-height: 18px; width: 300px;}
.bio img{ width: 147px; height: 188px;}
.picbox{width: 167px; height: 208px;}
#ani2{font-size: 48px; }
#contactinfo{ margin: 0px auto;}
#phone p, #email p, #dlresume p{ font-size: 18px;}
#dlresume img{width: 45px; height: 70px;}
}
Scott Magdalein
2,406 PointsWhen this happens to me, it's often because of either 3rd party code (like an embedded video or form) getting too big OR another div jumping outside its bounds. A good way to investigate is to use "inspect element" in Chrome/Safari and see what's pushing the right side out of view.
Side note, Chrome Dev Tools is a great resource for debugging CSS and JS.
Julian McNeill
9,445 Pointsthanks guys for responding. I tried overflow-x: hidden on the body and its working just fine. Still haven't found out what the problem was though but when I'm done coding the rest i'll post a link