Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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

Thanks so much for the help.

1 Answer

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!