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
jimmy kennedy
6,629 PointsMy about page remains one column despite responsive.css code to change it to two
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Jimmy Kennedy | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main1.css">
<link rel="stylesheet" href="css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One:400i|Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jimmy Kennedy</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About </a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/new beard.jpg" alt="Photograph of Jimmy Kennedy" class="profile-photo">
<h3>About</h3>
<p> hi this this an exercise i hope i can remember</p>
<p>if you'd like to follow me on Twitter do so at your own risk at <a href="http://twitter.com/frombehindgarot">@frombehindgarot</a>.</p>
</section>
<footer>
<a href="http://twitter.com/frombehindgarot"><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>Ā© 2016 jimmy kennedy.</p>
</footer>
</div>
</body>
</html>
@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) { }
2 Answers
Ricky Johnston
27,445 PointsHey Jimmy,
First, I just wanted to mention that it might be more helpful if you take a look at the Markdown Cheatsheet that's usually under these comment boxes. If you do that, it will format your code a little bit better and help everyone here in the community.
Now, to help solve your problem... it looks like your CSS is set up correctly to give you a two-column layout, but there's nothing in the HTML to indicate where the two columns should come from. You need to give one of your elements an id of "primary" and another the id of "secondary". If one of the elements on the page won't do, you could simply use a wrapper <div>.
I hope this helps! Good luck!
jimmy kennedy
6,629 Pointsyes, that was the problem, figured out I was missing a link=ref "stylesheet" statement. thanks