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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Deborah Williamson
Deborah Williamson
2,997 Points
Posted by Deborah Williamson
Deborah Williamson
2,997 Points

Contact page wont go into two columns

im following along with the video but the contact page wont part into two columns.

Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
Deborah Williamson
2,997 Points 
@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) {

}
Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
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
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

the ul element goes at the bottom of the list

Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
Deborah Williamson
2,997 Points

The ul element is fine. When i move it the bullet point strech across the screen

eck
eck
43,038 Points
eck
eck
43,038 Points

I copied your html and css and it works for me. That gives me two guess for what may be wrong:

  1. You are not linking your css to your html.
  2. 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
Jacob Cordeiro
934 Points
Jacob Cordeiro
Jacob Cordeiro
934 Points

the ul tag is at the wrong spot

Deborah Williamson
Deborah Williamson
2,997 Points
Deborah Williamson
Deborah Williamson
2,997 Points

Thanks. But I'm still not having any luck.