Topic: Two Columns – Image not covering height

haseltinedesign
May 16, 2023 at 4:30 am

I have three rows with alternating images and text in each column on my home page.

It looks great on desktop, but once you start to squeeze the window down to tablet vertical size, the images don’t cover the height and reveal white space beneath them. I need these images to stay at max height centered. They are not backgrounds, they are just images.

https://snipboard.io/xLBzNu.jpg

Any recommendations on how to do this properly? I’ve tried so many different ways including GenerateBlocks and Otter page builder.

Thanks again in advance!
David
May 16, 2023 at 4:35 am

Hi there,

can i see the site ?
haseltinedesign
May 16, 2023 at 4:36 am

Yes – https://www.staging3.silverliningsailing.com/

It’s in staging so it may throw an SSL error.
David
May 16, 2023 at 4:50 am
OK.
1. Add this CSS to your site:
```
.has-object-fit-cover figure {
    width: 100%;
    height: 100%;
}
```
2. Select the column Container Block that has your Image Block inside.
2.1 set the Sizing > Height to 100%
2.1 in Advanced > Additional CSS Classes add: has-object-fit-cover

3. Select the Image Block
3.1 set its Height to 100%
3.2 set its Object Fit to Cover
haseltinedesign
May 16, 2023 at 9:53 am

Worked like a charm – thanks for the help!
David
May 17, 2023 at 2:25 am

Glad to hear that

Viewing 6 posts - 1 through 6 (of 6 total)

Two Columns – Image not covering height