Hello guys, how can I make my image to be full width on mobile version?
Topic summary
A Shopify store owner seeks help making product images display at full width on mobile devices, currently showing unwanted left and right padding.
Solutions Proposed:
-
DaisyVo provided CSS code targeting the product media list with
max-width: 768px, removing gaps and left margins through the Theme Settings > Custom CSS section. -
kazi_1 suggested alternative CSS code for
base.csstargeting.product-media-containerwithmax-width: 749pxto set width to 100%.
Current Status:
- The original poster shared their store URL for troubleshooting
- Clarified they want minimal padding similar to a reference image shown
- Reported that kazi_1’s CSS solution did not resolve the issue
The discussion remains open with no working solution confirmed yet.
@NikosBat Hello can you share the link?
1 Like
Hi @NikosBat
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (max-width: 768px){
ul.product__media-list {
gap: 0 !important;
}
ul.product__media-list > li:nth-child(1) {
margin-left: 0 !important;
}
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
1 Like
Hello Kazi and thanks for answering, sure here is the url and password:
https://www.nistore.de/products/nistore™-winterhandschuhe, nikthe
Hello DaisyVo, maybe you understood me wrong, I want my image view to be like this one. As you can see, the image does almost not have padding on the right and left side
@NikosBat Put this CSS bottom of base.css
@media (max-width:749px) {
.product-media-container.constrain-height.media-fit-contain {
width: 100% !important;
}
}
1 Like
Thanks for replying Kazi, that didn’t work for me