[Support request] Lightweight Grid Columns Same Height

Home Forums Support Lightweight Grid Columns Same Height

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1301995
    Mark

    Hi guys,

    I’m digging awhile now trying to figure this out.

    I’m having a small issue with Lightweight Grid Columns stacking on top of one another neatly.

    I’m getting a gap between them that I would like to remove but I can’t seem to figure it out.

    I have removed all padding and margins from the columns but still getting a space below the images within the column.

    You can see the example here: https://events365.ie/

    I’m guessing its to do with the images that are controlling the height of the column. But I would like the image to fill the column without making it a background image.

    Thanks

    #1302439
    Leo
    Staff
    Customer Support

    Hi there,

    I would really recommend against using LGC now as the method is really outdated.

    Have you considered using the Grid blocks in our new plugin GenerateBlocks to create columns?
    https://wordpress.org/plugins/generateblocks/
    https://docs.generateblocks.com/article/grid-overview/

    It’s really the way to go now.

    Let me know if this helps 🙂

    #1303132
    Mark

    Hi Leo,

    Thanks for the response.

    I don’t use Gutenberg and have Classic Editor activated.

    Does GenerateBlocks still work?

    I don’t imagine so.

    Is it still possible with Lightweight Grid Columns?

    Thanks,
    Mark

    #1303249
    David
    Staff
    Customer Support

    Hi there,

    the gap exists because of the content within the columns not filling the space. To resolve this you can try this CSS:

    .lgc-column {
        overflow: hidden;
    }
    .lgc-column img {
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    It will make the Image behave like it were a background image and fill the available space

    #1303255
    Mark

    Hi David,

    Thanks for the response.

    Doesn’t seem to work either. I did initially try the img height 100% but it still gives me the extra bit of padding at the bottom.

    You can see on the live site now with your recommended CSS that the gap is still there?

    Thanks,
    Mark

    #1303317
    David
    Staff
    Customer Support

    I am not seeing my CSS on the site ? But looks like you found a solution, i suggest adding the object-fit property to your CSS to stop the image being distorted:

    .block-service-img {
        width: 100%;
        height: 450px!important;
        object-fit: cover; /* Add this to stop distortion */
    }
    #1303403
    Mark

    Hi David,

    Sorry, I removed that CSS. Yes, I figured setting the height of both 50/50 columns to 450px would do it including the image and it seems to have worked.

    Then any resolution below 768px will set the height to auto. (for mobile)

    Thanks for the help Leo & David!

    Much appreciated.
    Mark

    #1303412
    David
    Staff
    Customer Support

    Glad to hear that 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.