• Resolved stug2013

    (@stug2013)


    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 to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    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.

    Thread Starter stug2013

    (@stug2013)

    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

    (@hcabrera)

    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

    (@hcabrera)

    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

    (@stug2013)

    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.