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
Michael Aiello
859 PointsPage is not going to 2 column layout when I shrink window. Keeps it in 3 column regardless of window size.
This is the code I am using for 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(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;
}
header {
border-bottom: 5px solid #555555;
margin-bottom: 60px;
}
}
Linked with this code on each other page
<link rel="stylesheet" href="css/responsive.css">
5 Answers
Joe Dayvie
11,956 PointsMichael,
Make sure to add the meta tag into the head of your HTML document. Without this, the media query does not go into effect.
<meta name="viewport" content="width=device-width", initial-scale=1.0>
Joe
Michael Aiello
859 PointsHi Joe,
I had that added, but still no luck :/. This is my HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Mike Aiello Design</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez:400italic,400%7COpen+Sans:700italic,800italic,400,600,700,800,300' 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> Mike Aiello</h1>
</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 id="gallery">
<ul>
<li>
<a href="img/Austin-Instagram01.jpg">
<img src="img/Austin-Instagram01.jpg" alt="">
<p>Austin Logo</p>
</a>
</li>
<li>
<a href="img/Eye-Guy.jpg">
<img src="img/Eye-Guy.jpg" alt="">
<p>Eye Pink Floyd</p>
</a>
</li>
<li>
<a href="img/Final-Facebook.jpg">
<img src="img/Final-Facebook.jpg" alt="">
<p>Pete Rubish</p>
</a>
</li>
<li>
<a href="img/H-Letter2.jpg">
<img src="img/H-Letter2.jpg" alt="">
<p>Lettering</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/pages/MiLO-Design/203702486334973"><img src="social/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<a href="https://www.facebook.com/pages/MiLO-Design/203702486334973"><img src="social/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<p>© 2015 Mike Aiello</p>
</footer>
</div>
</body>
</html>
mikes02
Courses Plus Student 16,968 PointsThat meta tag is incorrect, it should be:
<meta name="viewport" content="width=device-width, initial-scale=1">
and it should also be placed up with your other meta tags.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Mike Aiello Design</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez:400italic,400%7COpen+Sans:700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
Michael Aiello
859 PointsHi Mike, I added that into my code just the way you have it and still no luck. Could it have to do with my screen size??
mikes02
Courses Plus Student 16,968 PointsI see that you are loading a main.css and a responsive.css are there conflicting styles? Can you share what's in your main.css file too?
Eilene Edwards
1,661 PointsMichael, I have the same problem. Did you ever fix yours?
Eilene Edwards
1,661 PointsI figured out what my mistake was and thought I'd share in case it helps someone else. My "PAGE: PORTFOLIO" section was outside the curly braces for "@media screen and (min-width: 480px)"
@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;
}
}
Everything from /***PAGE... to the 2nd to last } was outside of the final }.
Sebastian Bryan
514 PointsThank you very much Eilene, I have been looking for an answer to this question for days and that was what I needed. Praise God thank you once again. =D
mikes02
Courses Plus Student 16,968 Pointsmikes02
Courses Plus Student 16,968 PointsJust as a heads up I modified your post just to clean up the code formatting so it will be easier for other forum members to look through.
Can you post your HTML as well to accompany this?