Archived topic

Lightweight Grid Columns Same Height

7 replies · Started by Mark on May 26, 2020

Viewing posts 1–8 of 8

May 26, 2020 at 7:27 am #1301995

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

May 26, 2020 at 10:54 am #1302439

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 :)

May 27, 2020 at 1:48 am #1303132

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

May 27, 2020 at 3:59 am #1303249

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

May 27, 2020 at 4:07 am #1303255

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

May 27, 2020 at 5:22 am #1303317

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

May 27, 2020 at 6:31 am #1303403

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

May 27, 2020 at 6:50 am #1303412

Glad to hear that :)

This archived topic is closed to new replies.

Start building better websites today.