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

Store Design
1

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?

1 Like
2

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.

3

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.

Middle-Image.jpg
Middle-Image.jpg3000Ă—1650 387 KB

Top-Image.jpg
Top-Image.jpg3000Ă—1650 438 KB

1 Like
4

@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;
}
}
5

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.

1 Like
6

@LeighK

Thanks for update and support.

7

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

1 Like
8

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.

9

www.crownedqueenskinbeauty.com

10

my url:

http://www.crownedqueenskinbeauty.com/

1 Like
11

@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%;
}
}
12

Hello,

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

Thanks

13

@Jwatkin8

Thanks

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

14

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

BF75AC2C-3ED1-4079-9D60-63AF24D65D73.jpeg
BF75AC2C-3ED1-4079-9D60-63AF24D65D73.jpeg1089Ă—2144 286 KB

15

@LeighK

Thanks

it can be done some custom code on mobile device

16

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.

17

@Jwatkin8

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

18

Email sent to bamaniyaketan.sky@gmail.com

1 Like
19

@Jwatkin8

Thanks for it

i will check and let you know

20

hi @KetanKumar :slightly_smiling_face: 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/1649906

url: shopkihk.com

using icon template

thanks so much in advance if you are able