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

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

Posted by Madhavi Gundala
Madhavi Gundala
887 Points

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?

Karlyn Gibson
Karlyn Gibson
9,176 Points

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
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!

Madhavi Gundala
Madhavi Gundala
887 Points
Madhavi Gundala
Madhavi Gundala
887 Points

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;
}



}
}
Madhavi Gundala
Madhavi Gundala
887 Points
Madhavi Gundala
Madhavi Gundala
887 Points

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
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!