Ess Grid Image"contain" element off on mobile

[RocktheHouse1876]

Hello,

On my homepage essential grid, the green block with blue banner “Engage, Advocate, Educate”… the image is cut-off in mobile, so I changed the image to “contain” instead of "cover. This appears to work, though then a huge amount of white space appears below and above the block in mobile. As well, a white line appears to the right of block when viewing on non-mobile devices.

I’ve troubleshooted, and am not sure why when image is set to “cover” there is no odd white space, but then when set to “contain” (which is needed to not cut off logo image) the white mentioned appears?

Your expert help is needed!

[rad]

Hi @RocktheHouse1876,

Thanks for reaching out.

It’s only normal when the container’s aspect ratio doesn’t match with the image’s aspect ratio. I think the issue is the Cobbles element height,

When I checked, the image appears to be around 350px, and since it’s set to accommodate 2 height, then it will result in around 700px.

Hence, the square became a tall rectangle. And placing a square image to a rectangle container will cause spacing for contain and clipping for cover.

How about just displaying a different grid on mobile? Then just utilize the hide during breakpoints to the section where the grid is added. https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Thanks!

[RocktheHouse1876]

WOW! What a workaround… that’s brilliant! Thanks @Rad!

[ruenel]

You are most welcome!