All things Shopify and commerce
As you can see in the image, on mobile it shows a bit of the 2nd image for some reason, how can I center the one image and make it so the others don't show.
Store URL is: https://dododuck.ca/products/dodo-duck
Solved! Go to the solution
This is an accepted solution.
Hi TheDuckDuck,
This issue can be resolved simply by CSS codes added to your theme codes. Please go to your Shopify Admin > Online Stores > Themes > Customize > Custom CSS to add the custom code I'll attach below:
@media screen and (max-width: 600px){
.product--thumbnail_slider.product--mobile-hide li.product__media-item {
width: calc(100% - 3rem) !important;
}
}
Here would be the result after you add this custom CSS code to your theme: https://prnt.sc/Os70XPmtj1dQ.
Hope this helps! Should you have any further questions, please feel free to let us know.
Hello @TheDuckDuck ,
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your section-main-product.css file and paste the following code at the bottom:
@media screen and (max-width: 378px) {
.product__media-list .product__media-item {
width: calc(100% - -2rem - var(--grid-mobile-horizontal-spacing));
}
}
If you need help with code part you can contact me for services
You can find the email in the signature below.
Thanks
This is an accepted solution.
Hi TheDuckDuck,
This issue can be resolved simply by CSS codes added to your theme codes. Please go to your Shopify Admin > Online Stores > Themes > Customize > Custom CSS to add the custom code I'll attach below:
@media screen and (max-width: 600px){
.product--thumbnail_slider.product--mobile-hide li.product__media-item {
width: calc(100% - 3rem) !important;
}
}
Here would be the result after you add this custom CSS code to your theme: https://prnt.sc/Os70XPmtj1dQ.
Hope this helps! Should you have any further questions, please feel free to let us know.
Hi @TheDuckDuck
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px){
.product .product__media-list .slider__slide {
width: calc(100% - 3rem) !important;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024