Element movement on smaller screens

Nathan.a · July 17, 2018, 2:03pm

Hi,

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

matthewpmunger · July 17, 2018, 2:52pm

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

Nathan.a · July 17, 2018, 2:59pm

(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

Nathan.a · July 17, 2018, 3:11pm

Thanks for your help.

I think it is all as should be now

matthewpmunger · July 17, 2018, 3:14pm

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

Nathan.a · July 17, 2018, 6:13pm

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 )

matthewpmunger · July 17, 2018, 6:56pm

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.