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

Manjula Kashyap
Manjula Kashyap
2,694 Points

Changing to three column layout

In the video, Nick uses the following code for the 3-column layout:

'''

gallery li {

width:28.3333%;

}

'''

This does not work for me. Instead, the following code works for me:

'''

gallery a {

width:28.3333%;

}

'''

Why is this happening?

Hey there, your doing a great job by asking for input from the club. I am stumped without seeing the entire code. I would love to figure this one out with you. Could you please look into using codepen to share the HTML and the CSS? The a anchor tag has me wondering a few things I would like to try. Whenever you can is cool.

2 Answers

I don't see a # in the your code

        /**********************************
        PAGE: PROJECTS
        ***********************************/

        #gallery li { 
        width: 28.3333%;
        }

        #gallery li:nth-child(4n){clear:left;
        }

hope this helps

Manjula Kashyap
Manjula Kashyap
2,694 Points

Sorry, I missed the # when I asked the question. Here is the exact code I used:

''' #gallery a { width:28.3333%; }

#gallery a:nth-child(4n){ clear:left; }

'''

It does not work if I replaced 'a' with 'li'. I am using Google Chrome Version 39.0.2171.99 m as my browser.