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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

james niemerg
james niemerg
1,001 Points
Posted by james niemerg
james niemerg
1,001 Points

Nav alignment when expanding causes about and contact to stack.

Nav alignment when expanding causes about and contact to stack. This only happens for a split second after it goes from the tablet size to desktop size. It fixes itself if I expand it more. Ive included a screenshot.

http://i.imgur.com/Gdqo8Nu.png

/***********************************
HEADER
***********************************/

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

2 Answers

Kalen Loncar
Kalen Loncar
8,743 Points
Kalen Loncar
Kalen Loncar
8,743 Points

Try this on for size.

In #nav, change:

width: 52.5%; DELETE/comment out: margin-right;

In #logo, change:

width: 42.5%

I tried messing with the percentages and it worked for me. Not sure it will for you as your name may be a different length. I also had to change the font size of my name to 2.25em because it was causing issues. Not sure if that changes anything.

If you download Nick's source code, his website does the same. This may fix it for all! Let me know!

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

    /********************************
    PAGE: HEADER
    ********************************/

    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        /*margin-right: 0%;*/
        text-align: right;
        width: 52.5%;
    }

    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 42.5%;
    }

    h1 {
        font-size: 2.25em;
    }

    h2 {
        font-size: 0.825em;
        margin-bottom: 20px;
    }

}
james niemerg
james niemerg
1,001 Points
james niemerg
james niemerg
1,001 Points

Hey thanks, this got me on the right track. I had already tried messing with the font size to no avail. What ended up working for me was changing nav to 51% and #logo to 42%. Also removed the margin-right like you suggested. No issues now.

Thanks!

David Viri
David Viri
11,324 Points
David Viri
David Viri
11,324 Points

I cannot tell if you have media queries defined in this example. If you do it may be that you have a small gap in your screen width within those definitions that is causing this problem.

james niemerg
james niemerg
1,001 Points
james niemerg
james niemerg
1,001 Points

I do have them defined.

could the difference in the #primary and #secondary tags be causing this? Here is the whole code.

@media screen and (min-width: 480px) {

/***********************************
Two COLUMN LAYOUT
***********************************/

  #primary {
    width: 50%;
    float: left;
  }

   #secondary {
      width: 40%;
      float: right;
  }


/***********************************
PAGE: PORTFOLIO
***********************************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

/***********************************
PAGE: ABOUT
***********************************/

  .profile-photo {
    float: left;
    margin: 0 5% 175px 0;
  }

}



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

/***********************************
HEADER
***********************************/

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

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: .825em;
    margin-bottom: 20px;
  }


}