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 trialStanley Abraham
3,260 PointsColumns won't float. I don't know what I'm doing wrong. Please help!
@media screen and (min-width: 480px) {
/************************************
TWO COLUMN LAYOUT
************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
@media screen and (min-width: 660px) {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Stanley Abraham | Designer |</title>
<link rel="stylesheet" href="css/._normalize.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Stanley Abraham</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html"> Portfolio</a></li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Info</h3>
<p> If you need help with any projects,I am availible for work. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for emergency inquiries. I can be best reach via email or tweeter.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"> <a href="tel:857-654-4134">857-654-4134</a></li>
<li class="mail"> <a href="mailto:Stan773@gmail.com"> Stan773@gmail.com</a></li>
<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=standaman777"> @StanDaMan777</a></li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a>
<a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p> Socail media links</p>
<p>© 2014 Stanley Abraham</p>
</footer>
</div>
</body>
</html>
Edit: Fixed the code for you to show the code more clearly. Do have a look at the Markdown Cheatsheet to learn how to share code in the forums. Easy when you know how. :-)
4 Answers
Matthew Greenberg
8,173 PointsYour stylesheet is not linked correctly to the html document.
="stylesheet" href="css/responsive.css"> // this is what you have
<link rel="stylesheet" href="css/responsive.css"> //this is what you need
Philip G
14,600 PointsYeah, I too think this was the mistake.
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Stanley, the code looks fine to me from the forum post. I wonder how it is you're verifying the media queries are working. Are you using the browser to drag it to it's minimum width? As far as I remember it only goes to as thin as 480px so it might not be picking up the changes for you.
Try a great tool called www.quirktools.com/screenfly to check out your media queries without messing around with your browser width. :-)
David Omar
5,676 PointsFirefox has a nice responsive design view you can also use
Stanley Abraham
3,260 PointsThank you for finding the error in my code. I still have a problem. My my icon for my social media links are footed to the left.
Stanley Abraham
3,260 PointsHere is a link of how my website looks.... http://port-80-hvtgzcti4d.treehouse-app.com/contact.html
Philip G
14,600 PointsPhilip G
14,600 PointsI found no problems in your code. Can you please give us a link to your host? e.G. The Workspaces Preview Otherwise we can't help you properly. Thanks!