Columns with backgrounds only tiny on mobile

Support
#1

Hi,

I’m wondering if you can help. On the following page: https://thecircleathlc.co.uk/swimming-pool/ ( i will put the acces password in a secure note), half way down the page I have a swimmer in a column on the left as a background image and text in a column on the right. All looks fine on desktops but on mobile as the swimmer picture is only a background with no content it shrinks to a tiny bar. What im after is my picture to fill the column and still fill it when the sizes are different but to show on mobile also. Im guessing i need to actually insert an image into the column rather than setting a background but would need help making it always fill its column. I hope this makes sense.

thanks

#2

Since then i have added a smaller image and set its style to width: 100%, which works on desktop and mobile but when resizing the window down so it hits tablet territory, a grey box (the column background) appears below the image. I would like the image to always fill its container. Any ideas?

#3

Hey @King,

Please use the background method. Then, add a Gap element to the column with your image background. After that, configure the height of the gap element.

Just note that in this setup, there’s no way to show everything in your image. Parts of your image might get cropped or hidden by the aspect ratio of the column. It’s spatially not possible.

Hope that helps.

#4

Thanks @christian_y I did try that and configure the height of a gap but on a mobile the gap didnt show ie. the image just went to a tiny slither if that makes sense.

#5

update for @christian_y. Initially i used the classic gap which didnt work. I just added the v2 element gap and this has worked. :slight_smile: thanks very much.

#6

You’re welcome. Glad we could help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.