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

Diego Murray
Diego Murray
2,515 Points
Posted by Diego Murray
Diego Murray
2,515 Points

2 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

Andrew Robinson
Andrew Robinson
16,372 Points
Andrew Robinson
Andrew Robinson
16,372 Points

I'm using Chrome and this works just fine for me, did you solve the problem? Nice cars by the way.

Diego Murray
Diego Murray
2,515 Points
Diego Murray
Diego Murray
2,515 Points

I'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
Andrew Robinson
16,372 Points
Andrew Robinson
Andrew Robinson
16,372 Points

I'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
Diego Murray
2,515 Points
Diego Murray
Diego Murray
2,515 Points

Thanks so much for the help.

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi 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!