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
Felix Johansson
3,341 PointsWhy won´t my responsive code work correctly?
Hey, my General information column and my Contact Details won´t work as they should. Does anyone know why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Felix Johansson Web Designer</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">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Felix Johansson</h1>
<h2>Web 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 information</h3>
<p>I am currently looking for new design work, don't hesitate to contact me if you need help with your website or have questions about my design.</p>
<p>Send me a mail or contact me on <a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile">LinkedIn</a> if you are instested in my help.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="linkedin"><a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile">LinkedIn</a></li>
<li class="mail"> <a href="mailto:felix.difjohansson@hotmail.com">felix.difjohansson@hotmail.com</a></li>
</ul>
</section>
<footer>
<a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile_pic"><img src="img/linkedin.png" alt="LinkedIn Logo" class="social-icon"></a>
<a href="http://facebook.com/felix.d.johansson"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Felix Johansson.</p>
</footer>
</div>
</body>
</html>
@media screen and (min-width: 480px) {
/********************************
TWO COLUMN LAYOUT
********************************/
#primaty {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
3 Answers
John Donnell
7,801 Points@media screen and (min-width: 480px) {
/******************************** TWO COLUMN LAYOUT ********************************/
primaty { width: 50%; float: left; }
secondary { width: 40%; float: right; }
}
I see your id #primary is spelled wrong you have #primaty
Felix Johansson
3,341 PointsThanks!
Gerard Weppler
4,357 PointsDid you add your closing tags after your footer and div?
</footer>
</div>
</body>
</html>
could you please share all code.
Gerard Weppler
4,357 Pointsalso make sure to check that you spelled correctly your
<li><a href="index.html class="selected>Portfolio</a></li>
if you put an uppercase in "Index" on your about page and in your index page you have it listed as "index" it will not work.
same for your contact page.
Gloria Dwomoh
13,116 PointsGloria Dwomoh
13,116 PointsI can't see your code well. Click enter after the backtics + html/css you have written and again enter before typing the last backticks.