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
Daniel Riches
19,847 PointsMy navigation links are wrapping to a second line at the 660 break point, but only for a moment.
At the 660px breakpoint, my Contact link is wrapping onto a second line. Although if the user continues to minimize or maximize the window it goes back to the correct display. It looks like Nick's also does this in the video, but it's so quick that it's almost unnoticeable. Is there a quick and easy solution to this, or do we learn how to take care of this in a later video?
6 Answers
Riku S.
11,322 PointsThis happens because there is not enough place for all three navigation items at some point. Easy fix for this is changing your navigation anchors left and right padding to smaller.
So now it's "padding: 15px 10px", try changing it to "padding: 15px 9px;" or even less if needed.
Hope this helps!
Mark Darling
553 PointsI don't recall what the exact values were that Nick set the "nav a{}" paddings to when writing that section of code on the videos, but I found that mine were set to 15px and 18px instead of the 15px and 10px mentioned as the 'original values' above by user Riku S. (I probably messed up while following along from the video as Nick was typing.)
Upon changing the padding to 15px and 10px, this solved my issue of the nav bar wrapping in a narrow range of desktop-sized display range like the OP.
Before figuring that out however, I did try adjusting the media query as suggested by some of the other responses to the OP and changing the target sizes DID NOT solve the problem- for me at least.
Iain Simmons
Treehouse Moderator 32,305 PointsYeah if there's a max-width set on something else, then changing the media query won't help if the same rule is applied.
Brent Lageson
4,452 PointsI was having the exact same issue, I changed my min-width to 680px and now it works prefect!
Caleb Kleveter
Treehouse Moderator 37,862 PointsLike Iain said, if you change the max-width of the media query by a few pixels, it should fix it.
Riku S.
11,322 PointsChanging max-width works here as well, but keep in mind, that in real life projects the media width limits are usually set as they are for some reason, so changing them might change many other things as well.
Iain Simmons
Treehouse Moderator 32,305 PointsTrue, but the breakpoints should be set based on things like the navigation and other global elements, not arbitrary numbers based on device resolutions (e.g. 768 for some tablet portrait widths).
Daniel Riches
19,847 PointsThanks guys, I'm gonna experiment with this.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsOr adjust the breakpoint.
It just comes down to numbers, when the width is just a few pixels too large for everything to fit at a particular width.