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 trialCharlotte Junker
10,261 Points'Build a three column layout' video - creating columns moves my contact images out of alignment
Hi I'm on Stage 8 of 'How to make a website' in the video Build a three column layout. When writing the media query for min-width: 480px, we have used ids from primary and secondary columns for the contact page. When I do this, it throws the images we added earlier to the far left - behind the primary column, instead if including it in the secondary column. I'm pretty certain the code I have written is the same as Nick's and I can't see errors in the html or css for the contact page. There must be one though - can anyone spot it?! It's absolutely fine under the breakpoint of 480px.
Thank you so much!
From contact.html:
<section id="primary">
<h3>General Information</h3>
<p>Please contact me if you have any questions.</p>
<p>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:07793">07793</a></li>
<li class="mail"><a href="mailto:c@example.com" c@example.com>c@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=example">@example</a></li>
</ul>
</section>
From main.css:
/*****************************************
PAGE: CONTACT
*****************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
From responsive.css:
@media screen and (min-width: 480px) {
/*****************************************
TWO COLUMN LAYOUT
*****************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
3 Answers
Kristen Law
16,244 PointsIn the contact.html
file it looks like you have a typo when specifying the id
for the secondary section. It should be <section id="secondary">
instead of <section id "secondary">
. Hope that fixes the issue!
Charlotte Junker
10,261 PointsThanks Kristen! Have done that - any ideas about what my error could be? thanks!!
Kristen Law
16,244 PointsYeah I saw you fixed the formatting so I removed my comment :) Checking out the code right now
Charlotte Junker
10,261 PointsAh thank you!! So obvious now :) I really appreciate that - was driving me crazy! Will remember for future!