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 trialZainab Hardwarewala
2,873 PointsWhen I add odd number of portfolio images - there is a gap between them - is this a css thing?
The Portfolio homepage looks good with 4 or 8 images but when I just put in three. 2 images show up on the left, a gap and then the third image on the right. Looks like this XX X
When I add 6 images it looks like this XXXX X X
How the images are placed in the row/column - and why they don't line up like this
XXXX XX
Can that be changed via HTML/CSS or is that via PHP? How would you do it?
Zainab Hardwarewala
2,873 PointsHi Kyle,
No I didn't find a solution - I haven't complete this Course yet..if I find a solution - I'll post it here. The issue is likely in the CSS.
3 Answers
Daniel Gauthier
15,000 PointsHey Zainab,
I'm pulling this year old post out of the grave since I feel this issue warrants having some light shed on it.
Foundation is used in this project, and it will align the last item in a grid to the right by default.
If you add the 'end' class to the div inside of the second loop in the page-portfolio.php file, it will align the last item to the left.
Here's how the second loop for page-portfolio.php would look with the change:
<?php if( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="small-6 medium-4 large-3 columns grid-item end">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
Hope this helps anyone else who notices this behavior, since it isn't mentioned anywhere in this course.
Zainab Hardwarewala
2,873 PointsExcellent, thank you so much!
Rich Bagley
25,869 PointsHi Zainab,
Without seeing it on the page it's a little bit of a guess but it sounds as though it could be CSS related.
One way to check would be to use the browser developer tools (usually found by F12 or you can right click on one element on the page and choose 'Inspect Element'). You should then be able to see what styles (specifically margin and padding) are applied to each and debug the issue that way.
Hope that helps in some way.
-Rich
Zainab Hardwarewala
2,873 PointsHi Rich,
Thanks for helping out. I had tried formatting the XX's to reflect how the thumbnails show up on the page but that didn't work out up here. Anyway - I'll do what you suggested and have a look at the CSS. Thank you.
Rich Bagley
25,869 PointsNo problem :)
Kyle Binger
3,357 PointsKyle Binger
3,357 PointsI am also having this problem, did you ever reach a solution?