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 trialJ V
3,414 PointsWhen applying the 3 column layout concept, the following does not work.
Instead of applying a 3 column layout, I would like to apply a 4 column layout. I have written out the math below.
4 (columns) * 5 (2.5 margin space on left/right) = 20%
100% (total space) - 20% (margin space) = 80%
80% (space for photos) / 4 (columns) = 20% (for each photo)
When I apply
#gallery li
{
width:20%;
}
the columns do not change to 4, instead they remain at 3.
Am I doing something wrong?
2 Answers
Jason DeValadares
7,190 Pointsadjusting for 4 columns would have all the li's float left, and they would only be seen floating if the resolution was wide enough to handle it. You may have to downsize the image sizes for this to work. Try downsizing the the images to a lower percentage and see if that helps. If you have the nth-child CSS in place from this course you'll need to change it to the 5nth instead of 4nth.
J V
3,414 PointsHi Jason and Jake,
Thank you for your answer. I managed to find the problem. One of the photo margins was off-set.
Jake Lundberg
13,965 PointsJake Lundberg
13,965 PointsWould need to see more of your code to be able to answer accurately. I think you may be confusing things in your math.