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 Website Testing

Vlad Legkowski
Vlad Legkowski
9,882 Points
Posted by Vlad Legkowski
Vlad Legkowski
9,882 Points

Navigation issue: Contact jumps under the About when making browser smaller (to mobile layout)

And only then all Nav goes under the <title>

Looks something like this:

Profile About Contact

is it how it supposed to be?

Thanks

7 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Vlad Legkowski, the issue is simply because your name is longer (wider) than the heading used in the video.

Change the media query for the header/nav in the responsive.css to something a little wider and it should be fine:

responsive.css 
/* before */
@media screen and (min-width: 660px) {

/* after */
@media screen and (min-width: 690px) {

This is why breakpoints should always be based on content, not arbitrary widths that might match device screen widths or something.

Bo Stansell
Bo Stansell
1,164 Points
Bo Stansell
Bo Stansell
1,164 Points

*This is why breakpoints should always be based on content, not arbitrary widths that might match device screen widths or something.

Thanks for mentioning this. That's extremely helpful.

Ted Moxon
Ted Moxon
18,203 Points
Ted Moxon
Ted Moxon
18,203 Points

Use the markdown cheatsheat at the bottom of this thread

<h1>It should look like this </h1>
Ted Moxon
Ted Moxon
18,203 Points
Ted Moxon
Ted Moxon
18,203 Points

Can you post your code so we can see for ourselves what might be going on?

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

How to do this in the best way?

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Tom, i will upload the HTML in a minute, meanwhile have a look at my website http://gibtri.club

If you make it full screen on pc, and start to drag it to make it collapse to mobile view, at some point you can see that the Contact falls under the Portfolio, and only then, with continues minimisation, site turns to mobile

Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points 
@media screen and (min-width: 480px) {



/****************************
TWO COLUMN LAYOUT
****************************/

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

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

}




/****************************
3x5 = 15
100%-15%=85%
85/3=28.3333333
****************************/

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

#gallery li {
  width: 28.3333%
}

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

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

.profile-photo {
  float: right;
  margin: 10px 5% 100px 0;
}


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

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


nav {
  background: none;
  float: right;
  font-size: 1.125em;
  margin-right: 5%;
  margin-top: 1.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: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }


}
Vlad Legkowski
Vlad Legkowski
9,882 Points
Vlad Legkowski
Vlad Legkowski
9,882 Points

Thanks for this Iain! Works now! Tom, thank you also for making my question understandable to others.