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
Blake Provenza
Courses Plus Student 3,461 PointsTwo columns not working, they are both staying on the left side.
Here is my code:
@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) {
}
and
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am currently looking for new design work, if you have any questions please dont hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise Twitter and email are the best ways to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
i have looked over it many times and I'm not sure whats wrong with it, please help!!
4 Answers
Samuel Webb
25,370 PointsFrom the looks of your code, you're not putting the ending ul, section and div tags. Not ending HTML tags can cause problems when you try to implement CSS. This is what I ended up with and its now working.
HTML:
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am currently looking for new design work, if you have any questions please dont hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise Twitter and email are the best ways to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
</ul>
</section>
</div>
CSS:
@media screen and (min-width: 480px) {
/****** TWO COLUMN LAYOUT ******/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
}
Torben Ewert
3,172 PointsIt is working for me: http://codepen.io/anon/pen/gbpKON. Did you do anything else in your css?
Blake Provenza
Courses Plus Student 3,461 PointsAlright, I figured out the problem. Originally i was using safari, but now that I opened it in Firefox it responds how I wanted it to.
Thank you guys for all the help.
Abigail Page
2,056 PointsRealized that I hadn't linked the "css/responsive.css" file to the about and contact pages - that's why it wasn't working for me!
Blake Provenza
Courses Plus Student 3,461 PointsBlake Provenza
Courses Plus Student 3,461 PointsI tried that and it still doesn't seem to work!
my CSS is this:
``` @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) {
} ```
and my html looks like this
Samuel Webb
25,370 PointsSamuel Webb
25,370 PointsWhat width, in pixels, do you have your browser at when you're looking at this? This media query is for 480px and above. I'm just making sure you're not confusing this to mean everything below 480px should be 2 columns.
Are you correctly linking your CSS stylesheet to the HTML document? You can also use style tags in the head of your HTML file to check if there's an issue with your code. If your code works with the style tags, it's an issue with linking the pages.
The media query at 660px is doing nothing because there's nothing in it. You should erase it and see if that's causing your problem.