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 trialOliver Linde
2,775 PointsNot getting the 3 columns in the gallery and images for the contact details stay with the contact details when it expand
Not getting the 3 columns in the gallery and images for the contact details stay with the contact details when it expands to breakpoint. Cant find whats wrong in my code, please help!
This is my responsive.css code:
@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;
}
}
@media screen and (min-width: 660px) {
}
This is my contact code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Oliver Linde | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,400italic,800' 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>Oliver Linde</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 Information</h3>
<p>I am currently looking for new design work and similar engagements. If you have any questions, please don't hesitate to contact me.</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
</section>
<section id"=secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:+4676-2136464">+4676-2136464</a></li>
<li class="mail"><a href="mailto:oliverlinde@icloud.com">oliverlinde@icloud.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=dasichlinde">@dasichlinde</a></li>
</ul>
</section>
<footer>
<a href="https://www.twitter.com/dasichlinde"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/OliverLiinde"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Oliver Linde</p>
</footer>
</div>
</body>
</html>
Thank you for helpling me & have a good day!
2 Answers
Jason Anders
Treehouse Moderator 145,860 PointsHey Oliver,
I see two typos in you code.
The first on is in the CSS. In your #gallery li
, you have a comma instead of a period in 28.3333%
Second is in your HTML. For your section ID of secondary
, you have the equal sign and quotation mark backwards.
Fix those and it should work.
Keep Coding! :)
Oliver Linde
2,775 PointsThank you!