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

WordPress WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Homepage

Zainab Hardwarewala
Zainab Hardwarewala
2,873 Points
Posted by Zainab Hardwarewala
Zainab Hardwarewala
2,873 Points

When 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?

Kyle Binger
Kyle Binger
3,357 Points

I am also having this problem, did you ever reach a solution?

Zainab Hardwarewala
Zainab Hardwarewala
2,873 Points
Zainab Hardwarewala
Zainab Hardwarewala
2,873 Points

Hi 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
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey 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.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi 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
Zainab Hardwarewala
2,873 Points
Zainab Hardwarewala
Zainab Hardwarewala
2,873 Points

Hi 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
Rich Bagley
25,869 Points

No problem :)