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

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

Posted by Noah Rollins
Noah Rollins
1,317 Points

my contact page won't split into columns. Sections are aligned left and stacked and I'm pretty sure the code is right

'''css

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

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

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

'''

Craig Watson
Craig Watson
27,930 Points

Hi Noah,

Can you put a link to your preview on here as a comment please and I will have a look for you?

Thanks Craig

2 Answers

Sam May
Sam May
8,363 Points
Sam May
Sam May
8,363 Points

Might be stating the obvious, but seeing as it's in a media query, have you checked it between 480px and 660px wide? You can check this in Firefox using CTRL + SHIFT + M to engage a resizeable responsive web view. (Useful Tool)

If it's still not playing ball, try floating both columns left - they should stack up against eachother.

Bianca Negron
Bianca Negron
9,486 Points
Bianca Negron
Bianca Negron
9,486 Points

Floating both columns left is best unless you have a set width on the parent container. Also in your normal css (outside the queries if any) make sure there's not too much margin or padding otherwise the second column will stay stacked.