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 Adjust the Profile Page and Header

Peter Kalinowski
Peter Kalinowski
5,668 Points

in my responsive.css @media screen and (min-width: 660px) after putting in what you have in nav my links disappear.

typing in nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

all that shows up is the selected link for example "ABOUT" but when you hove over where the links should be they appear. also around the (min-width: 660px) in the media query the page looks totally different then what yours shows the text is different the nav links are not in-line block they move to weird positions.

4 Answers

The css code you have put in for the nav is correct. Have you set the color for the nav links in main.css? The code should be

nav a, nav a:visited{
  color:#fff;
}
Kevin Lawler
seal-mask
.a{fill-rule:evenodd;}techdegree
Kevin Lawler
Full Stack JavaScript Techdegree Student 5,929 Points

Hi Peter!

Thanks for writing back 9 days ago!

I was going to try and help before I read about your success!

The Treehouse Community is AWESOME!! :)

Make sure that you are viewing it between the media query's min-width and the next media query's (to do this you can either physically re-size your browser or simulate it in the Development Tools found in Google Chrome as well as many other browsers, but Google Chrome is simple to use and extremely customizable) as for each media query level the browser goes up, the browser will override the corresponding elements' CSS or style properties assuming you are not running into a cross-browser compatibility issue. The way to check that is ensure you are using the latest full version available since beta versions can have extra bugs and glitches, then try viewing it in another like Google Chrome, Internet Explorer, and Safari. In short, media queries are based upon view-size not simply screen resolution alone as otherwise the space may be too crammed even though it is all in High-Def resolution. If you need extra assistance I recommend either linking your code so we can check the rest of it as media queries make reverse cascading changes under best practices as you increase not desend like a cascading waterfall or as in the head of your HTML file; else, I would direct you to google to locate one of the top listed CSS validators and check your code there first as Treehouse teacher Nick Pettit always encourages, because it will be able to tell you if you have an orphin element or syntax error or perhaps need further more guided guidance.

Peter Kalinowski
Peter Kalinowski
5,668 Points

i found out what i did wrong.. thanks guys! :)

Powers Schurrer
Powers Schurrer
2,009 Points

Would you mind sharing what you did wrong and how you corrected the issue? I may have made the same mistake and am having some troubles.