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 trialDeborah Williamson
2,997 PointsContact page wont go into two columns
im following along with the video but the contact page wont part into two columns.
Deborah Williamson
2,997 Points <section id="primary">
<h3> General Information</h3>
<p> This is just a project</p>
</section>
<section id="secondary">
<h3> Contact Details</h3>
<ul class="contact-info"></ul>
<li class="phone"><a href="tel:000-000">000-0000</a></li>
<li class="mail"><a href="mailto:dtwill95@example.com"> dtwill95@example.com</a></li>
</section>
2 Answers
Jacob Cordeiro
934 Pointsthe ul element goes at the bottom of the list
Deborah Williamson
2,997 PointsThe ul element is fine. When i move it the bullet point strech across the screen
eck
43,038 PointsI copied your html and css and it works for me. That gives me two guess for what may be wrong:
- You are not linking your css to your html.
- You are using an older browser that does not understand media queries
I suspect that the problem is #1. Below are a couple ways to correct this if it is indeed the problem:
<!-- be sure the href path is to your stylesheet, the one I used is just an example -->
<link rel="stylesheet" type="text/css" href="css/style.css">
Alternatively you could add the following to the top of your html:
<style type="text/css">
@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) {
}
</style>
It is recommended that you use the <link> tag instead of <style> tags, but you will understand that as you learn on here :)
Jacob Cordeiro
934 Pointsthe ul tag is at the wrong spot
Deborah Williamson
2,997 PointsThanks. But I'm still not having any luck.
Deborah Williamson
2,997 PointsDeborah Williamson
2,997 Points