Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Website Testing

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

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

*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.

Use the markdown cheatsheat at the bottom of this thread

<h1>It should look like this </h1>

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

Vlad Legkowski
Vlad Legkowski
9,882 Points

How to do this in the best way?

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
@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

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