How to fix image display issue on mobile view for my store?

[LeighK]

My store is https://hespeakstoday.com/. There is an image in the middle of the page that does not show well in mobile view. Would someone please help?

[KetanKumar]

Hello, @LeighK 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your issue screenshot,
So I will check and provide a solution here.

[LeighK]

Thanks so much for your reply.  I have two similar issues.

First, I have an image that I added to the homepage through the gallery section.  Only a portion of the image can be seen on a mobile device.  I have screen shots of both the mobile and the desktop.

Second is a similar issue.  I added an image above the banner using the Slideshow section.  It displays perfectly fine on the desktop; however, in the mobile view the background is not visible.  Only the text is visible. 

Both images are attached.  Any help will be appreciated.

[KetanKumar · Accepted solution]

@LeighK 

Thanks 

can you please try this 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-160572568715f8fdf7 .image-bar__item {
    background-size: contain;
}
}

[LeighK]

Thank you!  This worked.  I can totally see the middle image in the mobile view. 

I am still working on the top image immediately above the banner.

[KetanKumar]

@LeighK 

Thanks for update and support.

[ShopKiHK]

hi @KetanKumar 🙂 would you be able to help me on a similar issue, but for a background video? it's showing up too large on mobile but perfect on desktop. i would like to contain or make smaller on mobile! here is the link to the issue:

https://community.shopify.com/c/shopify-design/need-to-resize-background-video-for-mobile/td-p/16499...

url: shopkihk.com

using icon template

thanks so much in advance if you are able

[Jwatkin8]

Hello,

I am having this same issue with the mobile  format. My entire image isn’t being loaded. It’s cut off. I entered the code referenced in this thread and it didn’t solve my issue. Could you assist me?

 Thank you 

[KetanKumar]

Hello, @Jwatkin8 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Jwatkin8]

www.crownedqueenskinbeauty.com

[Jwatkin8]

my url:

http://www.crownedqueenskinbeauty.com/

[KetanKumar]

@Jwatkin8 

Thanks for URL

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 600px) {
#shopify-section-slideshow .hero .hero__image {
height: 55%;
}
}

[Jwatkin8]

Hello,

It’s still not showing the image properly. “Crowned Queen” and the “y” on beauty is still cut off.

Thanks

[KetanKumar]

@Jwatkin8 

Thanks 

can you please let me know how to look right now?

[Jwatkin8]

Here is a screenshot from my phone of how it looks. 

 

[KetanKumar]

@LeighK 

Thanks 

it can be done some custom code on mobile device 

[Jwatkin8]

I don’t understand. Is this not something that you can assist me with. I tried it on two different phones and it’s the same thing.

[KetanKumar]

@Jwatkin8 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[Jwatkin8]

Email sent to bamaniyaketan.sky@gmail.com

[KetanKumar]

@Jwatkin8 

Thanks for it 

i will check and let you know