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

Once again it is not working as it does on the video........ Very frustrated.

My second problem with the video in one day. My layout does not change from 2 columns to one column on a mobile device. It stays two columns and adds in a scroll bar which is obviously not what I want.

I seriously hope I haven't wasted my money on this program because it started off well and now I am facing problem after problem.

4 Answers

You don't need to be frustrated. Many people learn from mistakes. Since this is the HTML course, have you run the code on your computer browser? Since there are many mobiles, some phones don't support the browser well as your desktop browser.

I am using both my computer and phone browsers to test it simultaneously. And neither the phone nor a narrowed browser has one column. They remain two columns.

I have copied the code exactly from the beginning of the course.

P.s I am using an iPhone 5s and an apple mac. So I would be very worried if the code wasn't supported by these browsers as majority of my clientele use these browsers.

Can you post your code? so I can test on my local computer.

Here is the responsive code:

responsive.css
/**************************
TWO COLUMN LAYOUT
**************************/



#primary {
    width:50%;
    float:left;
    }


#secondary {
    width:40%;
    float:right;
}


@media screen and (min-width:480px) {



}

@media screen and (min-width:660px) {

}

here is the html:

<!--first column-->

<section id="primary">

<h3>General information</h3>

<p>If you have any inquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p>

  <p>If you have any enquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p>

</section>

<!--second column-->

<section id="secondary">

<h3>Contact Details</h3>

<ul class="contact-info">

<li class="phone"><a href="tel:083-000000"><h4>Cell:</h4>083-000000</a></li>

<li class="mail"><a href="mailto:kathleen@mail.co.za"><h4>Email</h4>kathleen@mail.co.za</a></li>


</ul>

</section>

I guess you missed some codes. Try this one.

@media screen and (min-width: 480px) {
#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; } }

perfect thank you