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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Alistair Olson
PLUS
Alistair Olson
Courses Plus Student 4,283 Points

Page breaks not reducing properly for mobile device.

I've been through the tutorials several times but can't seem to locate what I've done incorrectly. My gallery remains in two rows of three even when reducing the browser (Chrome) down to mobile dimensions. Also, my menu (profile/about/contact) does not remain at a single horizontal level when the same reduction is applied but rather becomes two columns.

Serge Honderdos
Serge Honderdos
8,918 Points

Can you add your HTML and CSS?

luke hammer
luke hammer
25,511 Points

are you able to get any interactivity from the @media call?

7 Answers

Chris Brown
Chris Brown
1,923 Points

I don't know if this will help, it could be the font your using (I'm not sure) but I noticed in your responsive.css your 'page:portfolio' and your 'page about' classifications are not within the @media screen and (min-width: 480px) curly brackets. The same applies to your 'header' not being within the curly brackets of your @media screen and (min-width: 660px)

Here is mine:

@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(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: 5px solid #599868; margin-bottom: 60px;} 

}

Coding is frustrating. I hope this helps!

luke hammer
luke hammer
25,511 Points

just add it right here

Alistair Olson
Alistair Olson
Courses Plus Student 4,283 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alistair James | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <!-- <link rel="stylesheet" href="css/alternate-colors.css"> --> <link href='http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400italic,400' 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 href="index.html" id="logo"> <h1>Alistair James</h1> <h2>Photographer</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>Frozen Tracks</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Yellow Kayak</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Columns</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Bent Not Broken</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Low Tide Sunset</p> </a> </li>
</ul> </section> <footer> <a href="http://twitter.com/AliJames13"><img src="img/twitter-wrap.png" alt="Twittter Logo" class="social-icon"></a> <a href="http://facebook.com/Alistair.James1"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Alistair James.</p> </footer> </div> </body> </html>

luke hammer
luke hammer
25,511 Points

just add it right here

Alistair Olson
Alistair Olson
Courses Plus Student 4,283 Points

/******************************** GENERAL ********************************/

body { font-family: 'Open Sans', sans serif; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******************************** HEADING ********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'Montserrat', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************************** NAVIGATION ********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************************** FOOTER ********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

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

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************************** PAGE: CONTACT ********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/******************************** COLORS ********************************/

/* site body*/ body { background-color: #fff; color: #999; }

/* green header*/ header { background: #00006A; border-color: #000099; }

/* nav background on mobile*/ nav { background: #000099; }

/* logo text*/ h1,h2 { color: #fff; }

/* links*/ a { color: #00006A; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link*/ nav a.selected, nav a:hover { color: #0000FD; }

/* site body*/ body { background-color: #fff; color: #999; }

luke hammer
luke hammer
25,511 Points

just add it right here

Alistair Olson
Alistair Olson
Courses Plus Student 4,283 Points

/******************************** GENERAL ********************************/

body { font-family: 'Open Sans', sans serif; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******************************** HEADING ********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'Montserrat', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************************** NAVIGATION ********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************************** FOOTER ********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

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

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************************** PAGE: CONTACT ********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/******************************** COLORS ********************************/

/* site body*/ body { background-color: #fff; color: #999; }

/* green header*/ header { background: #00006A; border-color: #000099; }

/* nav background on mobile*/ nav { background: #000099; }

/* logo text*/ h1,h2 { color: #fff; }

/* links*/ a { color: #00006A; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link*/ nav a.selected, nav a:hover { color: #0000FD; }

/* site body*/ body { background-color: #fff; color: #999; }

Chris Brown
Chris Brown
1,923 Points

I had a similar issue as well but was able to figure out because I failed to place my classes (or id's) within the responsive css brackets. I'm not sure if this is the case until we see a code example.

Coding can be frustrating but the reward is found when the lesson is learned from when we figure out how we messed up!

Alistair Olson
Alistair Olson
Courses Plus Student 4,283 Points

I have already figured out some other minor errors and it is indeed gratifying. This one is vexing, for certain. Where should I display my code for review?

Chris Brown
Chris Brown
1,923 Points

I glossed over the code and from my experience, in order to add the breakpoints, you are going to need a @media css tag similar to this:

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

Inside of the curly brackets you will need to determine how many columns you will need and set them up as a percentage and float them right or left as needed.

Alistair Olson
Alistair Olson
Courses Plus Student 4,283 Points

Thanks for taking a look. I do however have that media query , @media screen and (min-width: 480px) {} , on my responsive.css page. I've reproduced my code to match Nick's example but it's still not resolving the breaks. Could my use of a different font be the root of the problem?

Chris Brown
Chris Brown
1,923 Points

So it seems your main.css file is okay but your index.html is missing a few opening and closing element tags. Not sure if this is the source of your problem but I figure if you add a bit at a time and it works, you'll find out where your problem is...Could you post your responsive css as well? BTW, here is my index.html file, compare it with yours!:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,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 href="index.html" id="logo"> <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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nick Pettit.</p> </footer> </div> </body> </html>

Alistair Olson
PLUS
Alistair Olson
Courses Plus Student 4,283 Points

Chris,

Thanks for posting your index so that I could compare mine to it. I went through it a couple of times but they appear to be identical, with the exception of my personal info and font change. Here is my responsive css:

@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(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: 5px solid #0000fd; margin-bottom: 60px; }

Alistair Olson
PLUS
Alistair Olson
Courses Plus Student 4,283 Points

Upon closer examination...It appears I had an extra curly bracket at the end of a headline and the gallery. I have removed them and it looks like I'm in business. Thank you for your assistance and patience. Now if I can just get a reply from web hosting for students and get my files uploaded ;-)