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 trialMadhavi Gundala
887 PointsBreakpoints 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?
4 Answers
Tobias Helmrich
31,603 PointsHey 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
887 PointsSure. 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
887 PointsPlease 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
10,142 PointsHi - 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!
Karlyn Gibson
9,176 PointsKarlyn Gibson
9,176 PointsFrom 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:
} /****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.