Evening out grid elements

Hi @stug2013,

The problem seems to be that you have uploaded featured images to your posts that use different dimensions. The plugin is resizing each thumbnail to the selected size (600×400) while maintaining the aspect ratio of the original image and because not all of the featured images have the exact same size (width & height) then the result is what you’re seeing on screen.

You could force all images to be 600px wide and 400px tall via CSS and that way they’d all look the same height but in return some of them will look distorted which is not a desirable outcome.

To permanently fix the issue make sure that all of your posts (or at least the popular ones) use featured images with the exact same width and height (eg. 1200px wide and 800px tall), then clear WPP’s thumbnails cache (Settings > WordPress Popular Posts > Tools, under Thumbnails) so the plugin regenerates the thumbnails with the right size and that should fix the issue.

Hey Hector thanks for that and I will be sure to correct them, but the other issue is that always the last element of the grid the border and white space below the postname extend down further than the others regardless of the size of the image. You can see the same thing happening in the other sections further down the page: INTERVIEWS, INSTRUCTIONAL, COURSES.

It seems it’s this CSS rule in your theme’s stylesheet what’s causing that effect:

.wpp-grid li {
    list-style: none;
    margin: 0 0 1.5rem; /*     <======= This one     */
    padding: 0;
    border: 1px solid #DEDEDE;
    background-color: #ffffff;
}

You can find it in /wp-content/themes/allegiant_pro-child/style.css, around line 1867.

Add this right below those rules:

@media (min-width: 768px) {
    .wpp-grid li {
        margin: 0 0 0;0
    }
}

It should look like this when you’re done:

.wpp-grid li {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid #DEDEDE;
    background-color: #ffffff;
}

@media (min-width: 768px) {
    .wpp-grid li {
        margin: 0 0 0;0
    }
}

That should do the trick.

Just realized I made a mistake there. It should be:

@media (min-width: 768px) {
    .wpp-grid li {
        margin: 0 0 0;
    }
}

(Note the absence of the extra 0 after the semicolon.)

Thanks so much. Your solution worked perferct.