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
Jeremiah Stiles
1,324 PointsWhy are my contact icons in my "primary" column, in the middle of my text when I expand the window?
Has anyone else had this issue and been able to fix it? What mistakes should I look for in my code?
@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) {
}
And my sections in contact.html
<section id="primary">
<h3>General Information</h3>
<p>blah blah blah blah</p>
<p>blah blah blah</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:blahblahblah@doofus.com">blahblah@doofus.com</a></li>
<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=Lycanis_Lykos">@Lycanis_Lykos</a></li></ul>
</section>
Jeremiah Stiles
1,324 PointsThanks, I think I got it. I pasted in what I have in my responsive.css file.
2 Answers
Ben Brenton
266 PointsJeremiah Styles,
Having looked at your code, I think the problem you may be having is a simple yet frustrating one for all of us. There is a missing semi-colon in your "secondary" selector in your css file, which means it won't be applying the width element to your right hand side column. I've marked the spot in your code below:
@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) {
}
Hope this works!
Jeremiah Stiles
1,324 PointsAH! I looked so long at it and never noticed that mistake. XD It's working perfectly now. :D Thank you so much!
Damien Watson
27,419 PointsDamien Watson
27,419 PointsHey Jeremiah, code would be handy (html and css) there is a link below when you ask questions "Markdown Cheatsheet" that can let you know. You can use 3 single quotes (above the tab key) followed by either 'html' or 'css' and end the code block by 3 more single quotes on their own line.