How to have images take full heights in a two grid container

Hi there,

the height of an image block is defined by the size you choose for that image. The grid block can't change that.
If the image is taller then then the any content in the other grid columns in will automatically fill the height of container.

Hi David,

Thanks for your response.

It's not taking the full height, there are still spaces on the top and bottom.

https://www.eastlondonelectricians.co.uk/test/

See my reply here:

https://generatepress.com/forums/topic/issue-with-a-section-on-large-desktop/#post-1954644

The issue you adressed in this post is about the width.

But the full height image is not working, i'm always having that top and bottom space.

Hi Mohammed,

The top and bottom space you see is the padding added to the content area of the page by the theme coming from the default CSS. (main.min.css)

You can remove this by setting the Container padding to 0 on Appearance > Customize > Layout > Container. (affects all containers)

Or by custom CSS. (which specifically removes the padding pointed on this image - https://share.getcloudapp.com/04u5bX2Y)

div#content {
padding: 0;
}

Hi Elvin,

Thank you very much for the explanation.

Please note - the option i provided you here:

https://docs.generatepress.com/article/content-container/

REMOVES the themes padding that includes the top and bottom padding you have....

Ok noted. Thanks.

There's one issue thou. When i resize image height, it's not taking effect. I'm having the image height less than the left content.

https://www.eastlondonelectricians.co.uk/test/

I am not seeing the actual image loading - just the placeholder for a lazy loader ? Can you disable the lazy loader so i can take a closer look.

yes. Just deactivated.

The best fix for that kind of image is to remove the image block.
Then select the grid column container add:

1. Set the Background Image.
2. Set the Minimum Height in the Spacing.