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
Alistair Olson
Courses Plus Student 4,283 PointsPage 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.
luke hammer
25,513 Pointsare you able to get any interactivity from the @media call?
7 Answers
Chris Brown
1,923 PointsI 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
25,513 Pointsjust add it right here
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
25,513 Pointsjust add it right here
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
25,513 Pointsjust add it right here
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
1,923 PointsI 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
Courses Plus Student 4,283 PointsI 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
1,923 PointsI 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
Courses Plus Student 4,283 PointsThanks 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
1,923 PointsSo 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
Courses Plus Student 4,283 PointsChris,
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
Courses Plus Student 4,283 PointsUpon 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 ;-)
Serge Honderdos
8,918 PointsSerge Honderdos
8,918 PointsCan you add your HTML and CSS?