Need some help with style issue.

Each post (https://ef**rn.com/learn/) should show the entire image, title, and excerpt. They're getting cut off. Please help to fix it. https://static.livechatinc.com/8801096/PBEAF1N6H9/8c06300cce53bfbd5c0acb5dcca92522/Spacing%20Post.png

  • Predrag Dubajic

    Hi eTech,

    Hope you're well.

    I had a look at your page and I'm afraid that this can't be sorted out with some CSS code.
    The thing here is that posts are sorted by the Isotope script, which works on a way that it calculates the height of the posts and then positions them absolutely on the page.
    Now, on your site, there's an issue with the script somewhere and it doesn't calculate the height properly and doesn't place them on the right spot.

    What we can do with CSS is set some fixed height on your posts and override the position set by the isotope script, you can do that with this CSS code:

    .page-id-953 .rt-col-lg-3 {
        position: relative!important;
        top: auto!important;
        left: auto!important;
        min-height: 530px;
    }

    However, with this code the layout of the page will look like this:

    As you can see it will align each row instead of placing posts right below each other.

    In order to properly sort this out, you should get in touch with the developers of your theme or plugin that's using Isotope to sort your posts so they can check the script and see why it's not properly calculating post height.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi eTech,

    Let me start from this first:

    We also noticed a weird animation when loaded for the first time as well as from switching category. Is that what you guys are referring to with "align each row instead of placing posts right below each other"?

    This is another downside of overwriting the Isotope code, we're messing up its styling so it needs a second to load new CSS and snap things in place.
    And for aligning the rows, I was referring that when you look the page now each row is aligned at top, but how isotope aligns it is that the posts from second and below rows will be placed based on the post just above it.

    This is exactly what we were looking for to align each row to the same height. Perhaps you guys can assist on fixing the spacing on mobile, before it was fine. Now it's too spaced apart. Thanks!

    Similar thing as above, we're affecting ispotope script styling so it doesn't load properly on different screens, however this we should be able to sort out by setting min-height value only on larger screens, so try replacing my previous code with this one:

    .page-id-953 .rt-col-lg-3 {
        position: relative!important;
        top: auto!important;
        left: auto!important;
    }
    
    @media screen and (max-width: 1110px) {
        .page-id-953 .rt-col-lg-3 {
            min-height: 540px;
        }
    }

    However, these are all workarounds and I strongly suggest getting in touch with your theme/plugin developer so they can sort it out in the script code directly.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.