Title: Evening out grid elements
Last modified: June 6, 2021

---

# Evening out grid elements

 *  Resolved [stug2013](https://wordpress.org/support/users/stug2013/)
 * (@stug2013)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/)
 * Hi Hector thanks for creating such a useful and adaptable plugin. I have used
   your grid tutorial and some of the other suggestions you have made in the forum
   to arrange several grids of posts, but in each grid the last element is always
   a bit longer. Can you please help me level them off.
    I am using a shortcode 
   and then the changes to the css file that you suggested in the grid tutorial.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fevening-out-grid-elements%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14525708)
 * Hi [@stug2013](https://wordpress.org/support/users/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.
 *  Thread Starter [stug2013](https://wordpress.org/support/users/stug2013/)
 * (@stug2013)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14525816)
 * 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.
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14525987)
 * 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.
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14528431)
 * 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.)
 *  Thread Starter [stug2013](https://wordpress.org/support/users/stug2013/)
 * (@stug2013)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14529992)
 * Thanks so much. Your solution worked perferct.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Evening out grid elements’ is closed to new replies.

 * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659)
 * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [grid](https://wordpress.org/support/topic-tag/grid/)

 * 5 replies
 * 2 participants
 * Last reply from: [stug2013](https://wordpress.org/support/users/stug2013/)
 * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/evening-out-grid-elements/#post-14529992)
 * Status: resolved