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 Scott Wolf
.a{fill-rule:evenodd;}techdegree
Scott Wolf
Front End Web Development Techdegree Student 1,148 Points

Grey Area between 480px and 660px

when my window is sized in between 480px and 660px my code acts a little strange. still presentable but not as it should.

between 480 and 660 i still have the colored nav bar and old css code applied

when i get to 660 it switches but my contact link is stacked under the other 2 but only for about 10-20px of screen adjustment once i go a little bigger it is fine

Scott Wolf
.a{fill-rule:evenodd;}techdegree
Scott Wolf
Front End Web Development Techdegree Student 1,148 Points

http://w.trhou.se/cv2zspyqfk

1 Answer

Tomas Novy
Tomas Novy
9,421 Points
Tomas Novy
Tomas Novy
9,421 Points

Hi Scott,

Your site acts correctly because nav bar on the right side of the header is applied only for desktop view (while min-width is 660px). Be aware that in responsive.css there are 2 media queries and changes for nav bar are selected under media query with min-width: 660px.

Regarding to second issue I have solved it by change of widths in nav and #logo in resposive.css. Instead of 45% width in nav I have set 55% and in #logo 35%. If you watch this video again you should notice that Nick has same issue while resizing screen. :-)

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 55%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 35%;
Scott Wolf
.a{fill-rule:evenodd;}techdegree
Scott Wolf
Front End Web Development Techdegree Student 1,148 Points

Awesome! Thank you so much.

Now I can sleep well at night!

Thanks for your time and effort!