All things Shopify and commerce
Hello I am having trouble with my slideshow image showing properly on mobile for the url below https://zenfactr.com/products/joint-back-neck-pain-support-pillow
Does anyone know who to fix it so the image isn't getting cut off on mobile , it shows up correct on desktop.
Solved! Go to the solution
This is an accepted solution.
Hey @Ecomowner
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (max-width: 767px) {
.slideshow__media.banner__media.media img {
object-fit: contain !important;
}
}
</style>
RESULT
If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @Ecomowner
I see your product page have many slideshow, can you point out which one by a screenshot?
if it's this section:
let try this Custom CSS:
@media screen and (max-width: 749px) {
#shopify-section-template--19205516624102__slideshow_zfeC8Q .slideshow__media img{
object-fit: contain;
}
}
This is an accepted solution.
Hey @Ecomowner
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (max-width: 767px) {
.slideshow__media.banner__media.media img {
object-fit: contain !important;
}
}
</style>
RESULT
If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025