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 trialDiego Murray
2,515 Points2 problems- Both regarding columns in Responsive Design
First, my homepage is stuck in a 3 column layout and doesn't go back to a 2 column layout when I shrink the screen size. Secondly my Contact page is having a similar problem. It doesn't adjust to a smaller screen size. The problems must be connected some how.
Here is a link to my workspaces: https://w.trhou.se/vtrabr6kwq
Diego Murray
2,515 PointsI've been using Safari and it doesn't work correctly. But yes, I just tried it out on Chrome and it works perfectly. Why could this be? If people are going to access by website via different browsers, I'd hope to get mine to work on Safari as well. Any suggestions?
Andrew Robinson
16,372 PointsI'm going to take a really wild guess, but I'm thinking the blank media query might be causing an issue, try it without it there and see what happens, if that doesn't work try to find any safari media query related problems online, I checked it using W3C CSS Validator and it's completely valid, try clearing your cache also.
Diego Murray
2,515 PointsThanks so much for the help.
1 Answer
Craig Watson
27,930 PointsHi Cristo,
I have have a really good look at your code and there is nothing that jumps out as wrong, but looking back over my code from that course my media query looked like this:
@media screen and (min-width: 480px) {
/*****************************
Two colum layout
*****************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/*****************************
Page: HOME PAGE
*****************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(3n) {
clear: left;
}
/*****************************
Page: ABOUT
*****************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
You seem to be missing a the clear:left statement in yours :)
Hope this gets you going again, Craig!
Andrew Robinson
16,372 PointsAndrew Robinson
16,372 PointsI'm using Chrome and this works just fine for me, did you solve the problem? Nice cars by the way.