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

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

yvesramos
yvesramos
12,816 Points
Posted by yvesramos
yvesramos
12,816 Points

Not getting the 3 columns in the gallery

Hi, I am trying to get the 3 columns for the gallery in the desktop size but is not working. I get the first 2 photos in a first row then the third photo in a second row then the last 2 photos. Can't find whats the problem is. Please HELP. Here are some codes: 

    #gallery {
        width: 50%;
    }

    #gallery li:nth-child(4n) {
        clear: left;
    }
***************************************************************
#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #003791;
}
***************************************

<ul id="gallery">
                    <li>
                        <a href="img/numbers-01.jpg">
                            <img src="img/numbers-01.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                            <img src="img/numbers-02.jpg" alt="">
                            <p>Playing with blending modes in photoshop.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                            <img src="img/numbers-06.jpg" alt="">
                            <p>Trying to create 80's style of glows.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                            <img src="img/numbers-09.jpg" alt="">
                            <p>Drios created using photoshop brushes.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                            <img src="img/numbers-12.jpg" alt="">
                            <p>Creating shades using repetition.</p>
                        </a>
                    </li>
                </ul>

2 Answers

Sara Greer
Sara Greer
16,032 Points
Sara Greer
Sara Greer
16,032 Points

Your gallery list item selector ( #gallery li ) is showing that you are still dividing the gallery into two sides ( one side: 45% (image) + 2.5% (left margin) + 2.5% (right margin) = 50% ). Create a media query for screens larger than 480px and create a new gallery list item selector that divides the gallery into three. In the video, Nick goes through the math for dividing the gallery into three parts around the 8 minute mark, where the image takes up 28.3333% of space, etc. Hope that gets you on the right track!

yvesramos
yvesramos
12,816 Points
yvesramos
yvesramos
12,816 Points

Got it. Thanks Sara, you make me see something I wasn't seeing. Don't know why I was forgetting the <li> element in the #gallery. I was typing just #gallery {} instead of gallery li {}. It was an obvious miss typing but a good practice. Thanks again. :)

Sara Greer
Sara Greer
16,032 Points
Sara Greer
Sara Greer
16,032 Points

Glad you figured it out!