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

James Hilts
PLUS
James Hilts
Courses Plus Student 871 Points

When I adjust the nav to respond to the media query, the nav a elements drop out of the header into the section element.

I went back to double check the responsive css and everything but still no change.

Kelly von Borstel
Kelly von Borstel
28,880 Points

Could you post your code -- both css and html?

If you have your code in a Workspace, could you share the preview link so everyone can see all your code? It's the link in the top-right area that looks like an eye.

For some reason that link doesn't work. I'm getting an error that says:

Workspace Unavailable

This is a preview link for a Treehouse Workspace that is not currently active. If you are the workspace owner, you can launch it again via the Treehouse site.

2 Answers

I see a typo in your main.css file in the Heading section. You have header spelled wrong. Should be:

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

In all 3 of your HTML files, you have the html tag spelled wrong in both the opening and closing tags. For the opening tag, It should be:

<html>

The closing html tag should be:

</html>
James Hilts
James Hilts
Courses Plus Student 871 Points

Thank you soo much. I don't understand how I missed that. Wow. You have good eyes.

No problem. I've just done this web dev stuff a bit longer. You get better at reading code with LOTS of practice. lol

Some good debugging tools to bookmark are W3C's validator services:

HTML Validator: http://validator.w3.org/

CSS Validator: http://jigsaw.w3.org/css-validator/