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

Marni Kostman
Marni Kostman
7,558 Points

At 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

Have 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
Nikola Mitic
9,023 Points

Hello my friend. I have the same problem. But i know the reason and have a solution, actually i have two solutions.

  1. Size down font of nav to 1em OR
  2. 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
Charles Johnson
1,377 Points

Thank you Nikola, I was having trouble with this as well. Setting the width of the nav ul to 100% fixed this perfectly.

Marni,

Would you please post your code so we can look at it? Thanks.

I'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
Travis Granger
2,745 Points

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

Review 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
Travis Granger
2,745 Points

ah 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?

Without seeing your code, I am only able to speculate about the problem. Please post it and I will see if I can help you.