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
kathleen de Villiers
4,912 PointsOnce 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
jungkeekim
Courses Plus Student 2,333 PointsYou 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.
jungkeekim
Courses Plus Student 2,333 PointsCan you post your code? so I can test on my local computer.
kathleen de Villiers
4,912 PointsHere is the responsive code:
/**************************
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) {
}
kathleen de Villiers
4,912 Pointshere 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>
jungkeekim
Courses Plus Student 2,333 PointsI guess you missed some codes. Try this one.
@media screen and (min-width: 480px) {
#primary {
width: 50%;
float: left;
}
#secondary { width: 40%; float: right; } }
kathleen de Villiers
4,912 Pointsperfect thank you
kathleen de Villiers
4,912 Pointskathleen de Villiers
4,912 PointsI 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.
kathleen de Villiers
4,912 Pointskathleen de Villiers
4,912 PointsP.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.