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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Hasnain Ashfaq
Hasnain Ashfaq
Courses Plus Student 3,929 Points

2nd break point where min-width is 660px the nav gets overlapped

@media screen and (min-width: 660px)

{

/********************************** About page layout ***********************************/ nav{ background: none; font-size: 1.125em; float: right; margin-right: 5%; text-align: right; width: 45%;

}

}

nothing seems to be wrong with this code. When my 2nd breakpoint gets execution the nav buttons get overlapped by eachother.

1 Answer

Natallia Sasinovich
Natallia Sasinovich
2,676 Points
Natallia Sasinovich
Natallia Sasinovich
2,676 Points

I'm not sure, but try nav li {.../your styles/...} or what tag you have for your buttons.

Hasnain Ashfaq
Hasnain Ashfaq
Courses Plus Student 3,929 Points

Nah it did not work. By doing this, my nav links are overlapped and not responsive at all. By inspecting i found that when the width goes between 880px to 660px the layout of the nav links gets disturbed. Under 660 they work fine. What possibly could be the reason? I have only two break points. 480 and 660 as explained in the video by Nick. It is driving me crazy. Is there anyway we could share screenshots here?