Element movement on smaller screens


I’m struggling with keeping this element to stay how I want it to. On my screen it is fine but on smaller screens it moves up slightly. Please see the attached photos.

Read only link: https://preview.webflow.com/preview/mag-00ea9d?preview=41698203f5325bb314b250d0dcba8400

Any help would be much appreciated :slight_smile:

Hey @Nathan.a

It appears to me that the image is determining the height and is 1px or so short. You could give the collection items a fixed px then make the images a background image of the collection item with it set to cover. Hope this helps. Happy designing!

Scroll down to the “Connecting the image field to background images” section

1 Like

(Just figured this out, was pretty simple lol)

Thanks for the response.

I have tired that but I didn’t know how to make the image ‘cover’ when set at a background image in a collection. Do you know a way to do this?


Thanks for your help.

I think it is all as should be now :slight_smile:

1 Like

:+1: Good deal! Let me know if there’s anything else.

1 Like

Is this anything you could help with? All images that I can apply atl text to have text. So I’m confused to why I’m getting all these. Also not sure what A element is… (I’m dumb with this stuff :joy:)

Hello again. I’m not an expert on accessibility either. Also your read-only link is no longer working. My suggestion is to fix the link and then post this as a new topic under the SEO Help or Design General categories. Thanks in advance.