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
Vanessa Elliott
1,742 PointsMenu items not lining up correctly at a particular width
I was moving my browser around to check the site at different widths and whatnot, and everything looked fine up until this one spot. I don't know the exact width that it is, but it's only for a split second. I had to adjust it very slowly to get it to hit the spot, but there's a point where the menu items just don't add up right. Here's how it looks:
https://gyazo.com/311c0313d29d4ed1bfa272a059af34fb
As you can see, instead of the menu items all being side by side, the Contact button slid down below the About button. But if I adjust the browser width bigger or smaller, it seems to fix it. So I suppose it's not a huge issue, only at this EXACT width would it look like this, but I dunno... It just kind of bothers me. Is there something I can do to fix this, or will something come up come up later in the lesson that will adjust it?
Snapshot: https://w.trhou.se/b1fzcmmpic
4 Answers
Robert Chamblee
12,711 PointsAnother option is to set the nav element's white-space property to no-wrap assuming you don't want it to ever wrap:
nav {
white-space: nowrap;
}
Vanessa Elliott
1,742 PointsWhere would I add this code? I think it'd go in the responsive css file, right?
Robert Chamblee
12,711 PointsActually, you can just add it to the nav rule in your main css file.
Vanessa Elliott
1,742 PointsThank you, this worked the easiest. It looks great now without having to change the breakpoints =)
Mark Ellis
Courses Plus Student 2,853 PointsThanks! I was having the very same problem and this worked for me.
Robert Chamblee is there any downside to doing it this way? Any other options for a solution?
Robert Chamblee
12,711 PointsOne downside I can think of is that if you wanted those elements to wrap below a certain width then you would have to change the white-space property again at that breakpoint. In that case, it might make more sense to just change the breakpoints.
Kevin D
8,646 PointsIn your CSS file, you could change the min-width to a larger number:
@media screen and (min-width: 300px) { // change the number here
// code...
}
This will mean that you activate the media query at an earlier point and you can avoid that happening.
Note: The only bad thing about changing the min-width is that you might not get the results you're looking for when implementing responsive design. For instance, if you're on a tablet device and you set the min-width too high in your responsive.css, your responsive design might not 'activate' since the condition is never met. So even though you've rotated the tablet from landscape mode to portrait mode, your webpage will not have updated to the 'smaller screen' design.
In future, it would probably be better to alter the actual element rather than change the min-width of the media query. But this should do the job for now!
Mark Ellis
Courses Plus Student 2,853 PointsKevin Dang, please forgive my lack of knowledge here, but how exactly would you alter the actual element? Would that be the best solution, so that you keep the responsive design that way?
Kevin D
8,646 PointsSomething similar to what Robert did above - so you're changing the property of an element in CSS (he's targeting the 'nav' element); but I've assumed you found that out now ^^
Steven Parker
231,198 PointsYou're just running out of room before you hit your larger media query threshold, and the inner elements are wrapping because the container is too narrow.
You could just change the threshold as Kevin suggested (make it 668px or more), or you could reallocate your space (like making the nav width 48% and the logo width 42%).
Mark Ellis
Courses Plus Student 2,853 PointsSteven Parker, how do you make the container larger? Is that what you're describing in parentheses, "(like making the nav width 48% and the logo width 42%)"?
Steven Parker
231,198 PointsWhat I meant is that the container narrows as you reduce the window size, and as it becomes smaller, the elements inside it wrap around. You want to keep your container dynamic, and just change the media query threshold or allocate a larger percentage to the nav area to prevent it only in that small "in between size" range where it wraps.
Now you could establish a minimum size that it wouldn't shrink below, using min-width. But that's pretty much what setting white-space: nowrap does anyway.
chrisobrien2
1,752 PointsI had the same exact issue and when I compared my responsive.css to the one from the course I noticed I had a small error.
Course code :
@media screen and (min-width: 660px) {
/********************************** HEADER ***********************************/
The snippet below is from the file I created. Notice the closing curly brace before the comment. Take that out and the behavior should be as the video shows
@media screen and (min-width: 660px) {
}
/********************** Header *********************/
Steven Parker
231,198 PointsSteven Parker
231,198 PointsIt would help if you share your code (be sure to blockquote it properly). Even better, make a snapshot of your workspace and post the link to it here.