Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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.