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.

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Breakpoints not working for me for responsive design

I'm following the tutorial "How to make a Website" and working parallely on the same example. For some reason, I can't see images in 3 columns and in "About" and "Contact" pages not able to see 2 column layout in large screen. Can somebody point me where the mistake could be?

From the CSS you posted, it looks like you have some misplaced closing curly brackets. Each media query should have its own opening and closing curly braces. Then, the CSS for that media query lives inside. So, it appears you are missing a curly brace at the end of the first media query. And, that you have an extra one at the end of the second media query.

Picking up mid-way through the code, the first media query should be:

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

} /****this is the curly brace you are missing

Then, just delete your very last curly brace at the end of the final media query...that curly brace is an extra one that isn't needed.

4 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Madhavi,

could you please post your code? In order to help you it would be helpful to see your code so it's easier to see what the problem could be!

Sure. Please find the code for responsive.css below -

@media screen and (min-width: 480px) {
 /*************************************************************
Two column layout
/*************************************************************
  #primary {
  width: 50%;
  float: left;  
}
  #secondary {
 width: 40%;
  float: right;
}
  /*************************************************************
PAGE: POTFOLIO
/************************************************************* 

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

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

@media screen and (min-width: 660px) {
 /*************************************************************
PAGE: 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: 5px solid #599a68;
  margin-bottom: 60px;
}



}
}

Please find coe for index.html - <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a id="logo" href="index.html"> <h1>Nick Pettit</h1> <h2>Designer</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> <div id= "wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nick Pettit.</p> </footer> </div> </body> </html>

Pablo Rocha
Pablo Rocha
10,142 Points

Hi - Are you using Chrome as your browser? I was having the same issue, I tried in Internet Explorer and it worked fine. Then changed the 28.33333 to 28 and it started working Chrome. I changed it back to 28.33333 and it continued to work in Chrome. My guess is Chrome was caching the formatting or something like that. Either way, try that and open and close your browser if that does not work.

Happy coding!