Shopify themes, liquid, logos, and UX
I need assistance in making the product images full width on mobile.
I installed an app called "GO Product Page Gallery + Zoom," and everything looks like it should.
But there is white padding/margin beside the image on mobile. How can I make the product image be full width so the white margins are no longer there?
The website is: https://veinci.com/products/floral-choker-flower-clasp-necklace
Here's an example of how it should look:
Solved! Go to the solution
This is an accepted solution.
Hey @parthpatel05
I hope you are well and safe!!
Please use this code in CSS file
@media screen and (max-width: 750px) {
.product.product--thumbnail_slider.product--mobile-show .grid__item.product__media-wrapper {
left: -1.5rem;
width: calc(100% + 3rem);
max-width: calc(100% + 3rem);
}
}
Thanks
This is an accepted solution.
Hey @parthpatel05
I hope you are well and safe!!
Please use this code in CSS file
@media screen and (max-width: 750px) {
.product.product--thumbnail_slider.product--mobile-show .grid__item.product__media-wrapper {
left: -1.5rem;
width: calc(100% + 3rem);
max-width: calc(100% + 3rem);
}
}
Thanks
I appreciate your help Pooja. It worked perfectly.
No problem, if you need more help then let me know.
Thanks
Where I have to put this CSS code? In theme.liquid?
Hey pooja_d_92,
Can you tell me to where copy and paste this code step by step, please?
Didnt work 😞
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025