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
PfP Web Team
7,285 PointsHaving problems with the nav element in the media query - my webpage doesn't react same as Nick's video.
As per Nick's video, I've added the nav element in the second media query and followed the on-screen instructions - I've set background: none; float: right; font-size: 1.125em; margin-right: 5%; width: 45%; However, when I shrink my browser screen down to mobile size, the navigation list wraps around so that "Portfolio" and "About" appear on one line with "Contact" underneath. As I increase the size of the screen, "Contact" slowly unwraps until they're all on one line. However in Nick's video, the nav list items always remain in a single line no matter the screen size. I've tried in both Chrome and Firefox, but my page reacts the same way - can someone advise if I'm missing something?
2 Answers
dantesolis
8,842 PointsHey there Scott,
The only thing I saw missing on your values was
```text-align: right;
But even after removing that I don't seem to be able to reproduce your error. In your main.css, check if you've the following values
/************************************** NAVIGATION **************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li { display: inline-block; }
I hope this was able to help you.
dantesolis
8,842 PointsScott Dernley, no problem. Sorry if it wasn't able to fix the problem, but let's know if you find the bug.
Happy coding.
PfP Web Team
7,285 PointsPfP Web Team
7,285 PointsThanks for responding to my query. I've checked my main.css against yours and my values were the same, but I think the issue is my responsive.css - when I amended the min-width for the media queries the page reacted normally and the list items stayed in a single line as per the video. I still trying to get my head around this, so thanks for your help! :)