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 trialSherry Evans
3,377 PointsProblem with the 2 column contact page
I can't get my site to go to two columns in desktop mode. Can someone help me figure it out where I went wrong. I did add the id's to the contact html. Thanks Sherry
@media screen and (min-width: 480px) {
#primary {
width: 50%;
float: left;
}
#secondary { width: 40%; float: left; } }
9 Answers
Don Shipley
19,488 PointsDo you have the id s into your html? You may also try #secondary { width: 40%; float: right;} Remove your second curly brace at the end.
Matthew Stewart
9,214 PointsCheck your html again, I just used your css to test it myself and it worked fine. Don't remove the second curly brace as it's part of the media query..
Sherry Evans
3,377 PointsHi This is the html from the contact.html that I have <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> Nothing here yet</p>
<p> I don't have a contact preference yet.</p>
</section>
<section id="secondary">
<h3> Contact Details</h3>
<ul class="contact-info">
<li class="mail"> <a href="mailto:lavendermoon26@hotmail.com">lavendermoon26@hotmail.com</a> </li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=dublin09">@dublin09</a></li>
</ul>
</section
Matthew Stewart
9,214 PointsI'm not seeing where you have the primary id in your code. Also, not sure if it just didn't copy over correctly but your "secondary" section isn't closed off properly. Could also cause a problem.
Sherry Evans
3,377 PointsYes I don't think I cut and pasted in correctly
<section id="primary"> <h3> General Information</h3> <p> </p> <p> I don't have a contact preference yet.</p> </section>
<section id="secondary">
<h3> Contact Details</h3>
<ul class="contact-info">
</section>
Sherry Evans
3,377 PointsMaybe its easier if I just retype I have <section id="primary"> and </section> <section id="secondary"> and </section> If this is correct and my css is correct I must have done something wrong somewhere else along the line.
Matthew Stewart
9,214 PointsRight, but do you have the primary id specified somewhere in your html? I don't see it in any of the code you've posted.. but it looks like you've only posted one section.
Sherry Evans
3,377 Points<section id="primary"> <h3> General Information</h3> <p> Nothing here yet</p> <p> I don't have a contact preference yet.</p> </section>
<section id="secondary">
<h3> Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:no"></a></li>
<li class="mail"> <a href="mailto:"></a> </li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=dublin09">@dublin09</a></li>
</ul>
</section>
Sherry Evans
3,377 PointsOk trying again to get the primary to show . nope I have no idea why when I save the answer it doesnt come up as what i have pasted????
<section id="primary"> <h3> General Information</h3> <p> Nothing here yet</p> <p> I don't have a contact preference yet.</p> </section>