Making hero images responsive?

Hello all,

I’m having some issues with my hero images (frequent on the site). Is there any guidance on making them responsive? For example, in the editor when I test on a mobile device the images look fine - but then when I load on my iPhone (X) some are cut in half.

Just wondered if there was some best practice when it comes to this.

Also, the site may not actually be live on the main URL as its just been switched on - please could you let me know if this is the case!

Thanks :slight_smile:

https://preview.webflow.com/preview/wdjc?preview=19e0e44e0db755bb4a6dc40808d9dd7a

What you want to do is manually adjust the background image position on mobile. Your subject is not centered so you’ll have to adjust the position on mobile. Hope that helps.

Hmm yeah thats what I have done. When I adjust it to the iphone x screen size it appears correct on the webflow editor, but then different on the device. I think I’ll just go with a mobile centered image, thanks for the help.

You can also drag the edges of the mobile canvas in webflow to simulate different phones.