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 Michael Reddington
Michael Reddington
2,786 Points

Content stretching beyond the width of the browser

The content in my below 767px width is flowing beyond the width of the browser (www.reddgate.com). I'm trying to get it so there's a consistent margin of 15px on the left and right when viewed on mobile devices.

Any ideas what's causing the page to be able to be scrolled right?

Much appreciated! :)

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Try adding an overflow property to your CSS sheet.

html, body, h2 {
    padding: 0px;
    border: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    overflow-x: hidden; //Try hiding the overflow with a rule like this.
}

That should eliminate the weird extra space on the side when using smaller screens. Site looks great!

Michael Reddington
Michael Reddington
2,786 Points
Michael Reddington
Michael Reddington
2,786 Points

That's awesome - thank you! :)

Another issue I can't seem to fix is the responsiveness of the flexbox div that contains the software i use.

When this div gets below about 400px wide, I want it to push the content below down... currently it overlaps.

Any ideas (much appreciated!)

Mike

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Hmm...I'm not particularly well-versed in flexbox, but my guess would be it has to do with the height you've set for the container div. Try taking that out and see if it solves your problem - hopefully without creating any new ones!

.software-skills {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* height: 350px; Try just taking this line out and see if any new issues pop up. */
    width: 563px;
}