Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

navigation links placed wrong!

heres a picture of it http://imgur.com/IuFxgFP

i think the navigation links are too long so they are pushing away the "other" link, i have no idea what to do now, anyone got a clue?

just tell me if you need the codes for my "main.css" or "index.html" or the "@media screen" css

5 Answers

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

It looks like you need to add a media query to handle small screens. What would you like the links to look like and yes please paste your code in

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

This is the media query css file

#gallery li:nth-child(2n+1) { clear:left; }

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

   /****************************************
   TWO COLUMN LAYOUT
   *****************************************/

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

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

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

   #gallery li {
    width: 28.3333%; 
  }


  #gallery li:nth-child(2n+1) {
     clear: none;

  }

  #gallery li:nth-child(3n+1) {
    clear:left; 
  }

    ```




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

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

}

@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.5em;    
    }

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

    header {
      border-bottom: 10px solid #599a68;
      margin-bottom: 65px;
    }
Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

Yes it does look like you need to change the margin/padding to to allow the text to fit or smaller text. Other than the you ming just have the link sit two to a column

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

nothing happens when i make the width higher

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

instead of making the text smaller, is there an way to make the links stay in line when i make the browser smaller?

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

When you get to sizes that small you should think mobile so smaller text is better.

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Heres some images of the websites behaviour

Scroll down to see the images.

http://imgur.com/a/AJiVf

at first its looking good, but then the "other" link is positioning wrong. the its good again, then when the browser gets smaller it gets positioned wrong again,

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

The width at 45% is not long enough to show your links on one line in the 660px media query. Still on smaller screens its just the over all size of your nav elem

erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

nothing happens when i set the width to a higher %