How can I fix my mobile homepage banner image cut-off issue?

Technical Q&A
1

Hey Everyone –

I’ve seen feedback on this issue across multiple themes, but have found no solution for my theme as of yet. To provide a bit of backstory, our homepage banner image looks perfect – but, our mobile homepage banner image seems to be cut off. I would love to have the ability to add a single homepage banner image for both device types without having to worry about the banner looking distorted on mobile.

Any ideas on how I could fix this?

Theme: https://universe-theme.myshopify.com/

Thanks!

2

Hi Jay! Hope you are doing well!

This problem is due to the fact that the aspect ratio of the images does not coincide with the container on the mobile phone, so the images are cropped. There are many solutions, for example, I can suggest changing the minimum banner height from 500 pixels to 400 pixels on a mobile phone, in which case it will be displayed better https://prnt.sc/12mx6cr and most likely the height setting is controlled from the customizer.

Alex

3

@AlexHodzitsky Thanks for the quick response, Alex!

I did make a few customizations to my actual site, so if you could take a look at that and make suggestions, that would be awesome.

Thanks!

4

I did make a few customizations to myactual site, so if you could take a look at that and make suggestions, that would be awesome.

This site has a minimum height of 400 pixels for this banner, it looks decent, is minimally cropped. I like. How else can I help?

Alex

5

@AlexHodzitsky On mobile, our model is almost all the way off of the banner. It would be much more ideal if he was centered on mobile, even though he is right-aligned on desktop. How can we make that happen?

This also brings up another point, what would be the best way to ensure that even when images aren’t centered on desktop, it is automatically centered on mobile? Would we need to add a section to the theme to upload mobile only homepage banners? If so, how? (Leaning on you and the other experts here for the best course of action either way)

Sidenote – I added a pw to the site, as we haven’t gone live yet (pw: test).

1 Like
6

Yes, you can do that. To do this, you need to display the setting with the choice of centering the picture in the customizer. But I will not be able to provide you with a step-by-step solution, since i need to look into the theme code. You can also hire a developer for this custom code.

2 Likes
7

Hi @jay_mil ,

To solve your problem, you need to customize this slideshow module.
If you can not do that, you can add me as a staff and I’ll check it for you (my email: jones.evan137@gmail.com)