Mobile Homepage Banner Cut-Off on Mobile

jay_mil
Tourist
3 0 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!

0 Likes
AlexHodzitsky
Shopify Partner
70 19 26

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

I didn't choose the Shopify, the Shopify chose me.
Linkedin: alex-hodzitsky
0 Likes
jay_mil
Tourist
3 0 1

@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!

0 Likes
AlexHodzitsky
Shopify Partner
70 19 26

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

I didn't choose the Shopify, the Shopify chose me.
Linkedin: alex-hodzitsky
0 Likes
jay_mil
Tourist
3 0 1

@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).

AlexHodzitsky
Shopify Partner
70 19 26

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.

I didn't choose the Shopify, the Shopify chose me.
Linkedin: alex-hodzitsky
LitExtension
Shopify Partner
871 99 158

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)

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes