Mobile and smaller screen responsive Shopify banner

Hi !

We’re having trouble making our home page banner be responsive to smaller screens and mobile screen dimensions. We want the width and height of the banner to adapt to the different screens without having the image cropped off. Can you help us please?

Thanks!

See pictures below :

Hi there @myprysm !

Thanks for reaching out here in the Shopify Community for some more information!

Can you clarify, are you referring to the slideshow section of your theme and how the image is being cropped there when viewed on different screen sizes?

If so, this is working as expected due to how these slideshow image sections are coded.

You can check out our best practices for uploading images guide here to see how you can best work within these requirements.

There’s more info on how to combat image cropping for sideshows here on our blog site too!

I’d recommend you check those out and look for an image that will work well on every screen size.

Try testing out some selections on a few different devices and screens so you get an idea of how it appears there.

Can you tell me a bit more about your business and what you’re working on, is this a jewellery store you’re moving online?

Hi Don,

Well, it’s not really a slide show, only the home page picture (“Image with text overlay”). The problem is that we want our customers using mobile devices to be able to see the full width of the picture, as there are some key products on each extremities of the pictures.

We’re a Montreal jewelry brand. We make minimalist jewelry with delicate and geometric designs! We sell online as well as through wholesale.

Thank you for clarifying the method we should use to fix this problem.

Prysm