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 Amrit Pandey
Amrit Pandey
17,595 Points

Responsive design failed on nav bar.

The Nav bar must shrink down to mobile version is not doing so. I have all my code correct yet, the responsive design of nav bar in header in mobile version and desktop version is same! My Responsive CSS is here:

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

}

/***************************
TWO COLOUMN LAYOUT
****************************/

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

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

/***************************
PORTFOLIO
****************************/
#gallery li{
  width:28.33333333333333%

}

#gallery li:nth-child(4n){
  clear:left;
}

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

.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.9em;
  margin:20px;
}

header {
  border-bottom: 5px solid #599a68;
  margin-bottom:60px;
}

My HTML code is here:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Amrit Pandey | Student</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet">
    <link rel="stylesheet" href="css/amrit.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Amrit Pandey</h1>
        <h2>Student at Treehouse</h2>
      </a>
      <nav>
         <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <!-- This is where wrapper division starts -->
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/number-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>This is number 1</p>
            </a>
          </li>

          <li>
            <a href="img/number-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>This is a number 2</p>
            </a>
          </li>

          <li>
            <a href="img/number-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>This is Number 6</p>
            </a>
          </li>

          <li>
            <a href="img/number-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>This is a number 9</p>
            </a>
          </li>

          <li>
            <a href="img/number-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>This is a number 12</p>
            </a>
          </li>

        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/iamamritpandey">
          <img src="img/twitter-wrap.png" alt="Twitter" class="social">
        </a>
        <a href="http://facebook.com/spanit007">
          <img src="img/facebook-wrap.png" alt="Facebook" class="social">
        </a>
        <p>&copy; 2017 Amrit</p>
      </footer>
    </div>
  </body>  
 </html>

I don't know how to add the screenshot, the problem actually is with the nav bar, as I decrease the size of screen less than 660px the nav bar should change to mobile version (in one horizontal line) but in fact all the tabs get stacked over each other same as a desktop version screen size.

What is wrong?

Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

Can you take a snapshot of your workspace and send the link?

Its usually at the upper right corner, with an logo of a suitcase with a dot.

1 Answer

Margaret Nelson
Margaret Nelson
6,394 Points
Margaret Nelson
Margaret Nelson
6,394 Points

I don't know if this will solve the problem, but it looks like you are missing a ; after the %

/*************************** PORTFOLIO ****************************/

gallery li{

width:28.33333333333333%

}