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

Posted by Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Navigation text is wrapping at what i think is 660px.

My site is completely finished and responsive, except for this one issue. At a specific breakpoint, (which I think is around 660px), the navigation text is wrapping. So I have Portfolio | About | Contact. And at one point 'Contact' wraps below 'About'. If I continue to expand the browser, it fixes itself pretty quickly. Can someone explain why this is happening and how i can fix it?

2 Answers

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi,

Check you media queries when the px are not complementing each other: meaning that one query says to break at 680px and the other is set to a breakpoint of 682px so you have 2px that are going rogue.

This could be it. You could increase the breakpoint before the text wraps.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

did you made sure tu set the width of the nav element at 100% so that it doesnt narrow ?

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Here's my responsive.css file. The width is set to 45%. Did you mean to set a width in my regular css file?

@media screen and (min-width: 480px) {

/*************************************** CONTACT PAGE: TWO COLUMN LAYOUT ****************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/*************************************** PAGE: PORTFOLIO ****************************************/

#gallery li { width: 28.3333%; }

/*************************************** PAGE: ABOUT ****************************************/

.profile-photo { float: left; margin: 0 5% 80px 0; } }

@media screen and (max-width: 480px) {

/*************************************** PAGE: PROFILE ****************************************/ 

#gallery li:last-child {
  clear: left;

}

#gallery li:nth-child(3) {
clear: left;

} }

@media screen and (min-width: 660px) {

/*************************************** HEADER ****************************************/

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

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.0em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #9b8c78; margin-bottom: 60px; }

}

'''