How can I optimize slideshow image visibility for mobile on Shopify?

[zamanhasanov23]

I am usuing different images for dekspot and mobile my dekspot and tablet version automatic fit to my images. but mobile version text hard to read. See the screenshot attached. I am using Refresh Thema and custom slideshow code which separate mobile and dekspot slide image. But i want show same mobile image in all mobile phone without any cropping.

Store: maiseey.com

[PageFly-Victor]

Hi @zamanhasanov23

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly

[GemPages]

Hi @zamanhasanov23 ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

1. Go to Edit code on Online Store:

2. add my code above the tag on Theme.liquid:

Eg:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[Ujjaval]

@zamanhasanov23
Add below css into base.css file

@media screen and (max-width: 425px){
#Slide-template--16745616900310__slideshow-1 .large-up-hide img {
    object-fit: contain;
}
}

[zamanhasanov23]

Thank you very much. Which is best size for mobile without any space. Please check image below

[PageFly-Victor]

You can use this code to fix it

@media screen and (max-width: 767px){
.slideshow__text-wrapper.banner__content.banner__content--bottom-left.page-width.banner--desktop-transparent {
min-height: 24.7rem !important;
}
}

[zamanhasanov23]

I try this code same screen perfect but somes is not good. No any way show image for all mobile screen perfect?

[PageFly-Victor]

You can try this code to fix it

@media screen and (max-width: 767px){
.slideshow__text-wrapper.banner__content.banner__content--bottom-left.page-width.banner--desktop-transparent {
height: auto !important;
}
.slideshow__media.banner__media.media.medium-hide.large-up-hide {
height: 90% !important;
}
}