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 trialVlad Legkowski
9,882 PointsNavigation 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
Treehouse Moderator 32,305 PointsHi 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:
/* 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.
Ted Moxon
18,203 PointsUse the markdown cheatsheat at the bottom of this thread
<h1>It should look like this </h1>
Ted Moxon
18,203 PointsCan you post your code so we can see for ourselves what might be going on?
Vlad Legkowski
9,882 PointsHow to do this in the best way?
Vlad Legkowski
9,882 PointsTom, 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
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
9,882 PointsThanks for this Iain! Works now! Tom, thank you also for making my question understandable to others.
Bo Stansell
1,164 PointsBo 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.