Matching column sizes with image

How can i put images in columns opposite of the text here…

https://goalsarecool.com/

I want the image to be the same height as the text in the opposite column.

Hey there,

Using an image in the opposite column is tricky. That would require custom media queries or Javascript to achieve. Instead, you can make the image the background of the column and put a Gap element so it won’t collapse on mobile. You might want to check this similar setup https://youtu.be/js-XbR8e7Os

Thanks.

Hey @christianynion, thank you for the video. This is what I tried last night, but i used min-height instead of background-size. Unfortunately, It’s not working the way I want it to work.

I followed your instructions for the image opposite of the academy at the bottom of the page here: https://goalsarecool.com/

As you can see, the full image is not displaying. Part of the image seems to be hiding behind the other column. I created the image in Canva at 800px x 800px. For your solution to work, do I need to resize this image and, if so what size should it be?

Thanks!
Blake

Hi Blake,

That how it works when you add an image as background. You can add an image element instead.

Just be sure to add the class man to each image to remove the bottom border.

Thank you