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
Louis Espinoza
1,514 Points2 column layout is not displaying properly
When I scale the browser down to the mobile version, I get two columns but they do not sit next to each other. I can't figure this out.
<!DOCTYPE html>
<html>
<!--contains meta information-->
<head>
<meta charset="utf-8">
<title>Louis Espinoza | Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Louis Espinoza</h1>
<h2>Portfolio</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">
<a href="img/numbers-01.jpg">
<li><img src="img/numbers-01.jpg" alt=""></li>
<p>Experimentation with color and texture.</p>
</a>
<a href="img/numbers-02.jpg">
<li><img src="img/numbers-02.jpg" alt=""></li>
<p>Playing with blending modes in photoshop.</p>
</a>
<a href="img/numbers-06.jpg">
<li><img src="img/numbers-06.jpg" alt=""></li>
<p>trying to create an 80's style of glows.</p>
</a>
<a href="img/numbers-09.jpg">
<li><img src="img/numbers-09.jpg" alt=""></li>
<p>Drips created using photoshop brushes.</p>
</a>
<a href="img/numbers-12.jpg">
<li><img src="img/numbers-12.jpg" alt=""></li>
<p>creating shapes using repetition.</p>
</a>
</ul>
</section>
<footer>
<a href="https://twitter.com/Louis_Espinoza1"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="https://www.facebook.com/profile.php?id=100009123028980"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Louis Edward Espinoza</p>
</footer>
</div>
</body>
</html>
/***************************
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%;
}
/***************************
Heading
***************************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', 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;
}
/***************************
Footer
***************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
}
/***************************
Page: Portfolio
***************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7
}
/***************************
Colors
***************************/
/*Site Body*/
body {
background-color: #fff;
color: #999;
}
/*Green Header*/
header {
background: #6ab47b;
border-color: #599a68;
}
/*Nav background on mobile*/
nav {
background: #599a68;
}
/*Logo Text*/
h1, h2 {
color: #fff;
}
/*Links*/
a {
color: #6ab47b;
}
/*Nav Link*/
nav a, nav a:visited {
color: #fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
6 Answers
Ryan Field
Courses Plus Student 21,242 PointsI don't see any media queries in your CSS. Is it in a different file? If so, it's not linked inside your
<head> tags, so that might be the reason.
Brian Romine
9,518 Pointsyes, what Ryan said. In order to get your layout to change based on window size, you want to use media queries (@media). These contain a different set of styling based on parameters you include in the queries.
Brian Romine
9,518 PointsMedia queries are If/Else statements you can include in your CSS. You use them to change how your page is laid out responsively to different size windows. They are kind of an integral part of modern CSS, so it's worth taking some time to get to know them.
Here's an article about them. http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
And here's a treehouse video. https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=intro%20to%20media%20queries
Douglas Berg
9,237 PointsAt this point in the project there are no media queries as only the "mobile" version of the site has been completed. I'm at the same point and have the same problem. The layout is based on a max width and the columns are supposed to be derived from the 45% width and float left properties on the un-ordered list. However, when following along with the video the output doesn't seem to match.
georgeroyce2
7,432 PointsHaving the same troubles, well put Douglas.
Louis Espinoza
1,514 PointsI'm sorry I am not quite to sure what media queries are?
Louis Espinoza
1,514 PointsThanks for the response and info.