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 trialGabino Garcia
4,407 PointsProblems with "build a three column layout" with un-even images
Hi,
So far, I'm having trouble following this exercise since I have one image that is taller.
following with the codes used in this exercise:
@media screen and (min-width: 480px) {
/* For a two column layout */
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/* 3-layout scheme for our gallery/works page */
#gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { /* Review your CSS again!!!*/ clear: left; }
}
Here's what it looks like when I expanded the browser size:
and here's what it looks like when I shorten the size of the browser:
the one with the light blue background is the third image while the one with the green background is the fourth...With the example in that video it should be positioned right next to each other...as you can see with my work it's not. Could be because the fourth image is a taller image unlike the others.
When I remove the nth-child css code it appears just the same..
Please help. Thanks
1 Answer
Drew Schott
8,484 PointsThe problem with the 3rd picture is because of the 1st image being taller than the 2nd. With such different sized images and heights of text boxes, maybe floating won't be the best option for you. Try adding a media query for a rsolution size of when it goes 2-column, and put a 'clear: right' on the 2nd child.