[Support request] Lightweight Grid Columns Same Height

[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

[Leo]

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 🙂

[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

[David]

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

[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

[David]

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 */
}

[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

[David]

Glad to hear that 🙂

[Author]

Posts