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
Marni Kostman
7,558 PointsAt a certain width, the contact link in the nav moves onto the next line: where did I go wrong?
At a certain width, the contact page on my nav line shifts down below the about and portfolio links while in the desktop view. Where did I go wrong here?
7 Answers
Sally Gradle
24,694 PointsHave you added the meta tag on the HTML files? In each HTML file you need to have the following in the head:
html <meta name="viewport" content="width=device-width initial-scale=1.0">
Hope this helps.
Nikola Mitic
9,023 PointsHello my friend. I have the same problem. But i know the reason and have a solution, actually i have two solutions.
- Size down font of nav to 1em OR
- Set the width of nav ul to 100%
Contact link doesn't have enough space in the ul, so it push it self to another line. Hope that help, and don't know why Nick didn't say nothing about this.
Charles Johnson
1,377 PointsThank you Nikola, I was having trouble with this as well. Setting the width of the nav ul to 100% fixed this perfectly.
Sally Gradle
24,694 PointsMarni,
Would you please post your code so we can look at it? Thanks.
Olivia DeSimone
798 PointsI'm having the same problem. Here is a snippet of my code for the nav bar:
@media screen and (min-width: 660px){
/***************
HEADER
****************/
nav{
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width:45%;
I'm pretty sure it is exactly what Nick does in the video. Does it have to do with the break point value?
Thank you.
Travis Granger
2,745 PointsSally - is this really the correct way to fix this issue? I am having the same problem but I do not recall Nick having us add this meta tag in our html files... the issue only happens in the intermediate width (after the first break point).
-Travis
Sally Gradle
24,694 PointsReview the video. At about 7:20 he completes the explanation of the function of the responsive design, then explains what to do next.
Travis Granger
2,745 Pointsah yes, I hadn't gotten to that point in the video yet but I have and completed that step. For what it's worth, this was an issue I noticed between Nick and my versions before we got to adding the meta tag.
I have since added the meta tags but unfortunately, it did not fix the issue. The contact link still appears on a separate line after the first break point (but readjusts after the second break point to the mobile version). Could it be an issue with my nav ul margin / padding spacing in my main.css? Do we need to write any code for nav in the first media query?
Sally Gradle
24,694 PointsWithout seeing your code, I am only able to speculate about the problem. Please post it and I will see if I can help you.