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 trialyvesramos
12,816 PointsNot 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
16,032 PointsYour 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
12,816 PointsGot 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
16,032 PointsGlad you figured it out!