How can I adjust images to full width on mobile view?

[parthpatel05]

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:

 

[pooja_d_92 · 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

[parthpatel05]

I appreciate your help Pooja. It worked perfectly.

[pooja_d_92]

No problem, if you need more help then let me know.

Thanks

[igues]

Where I have to put this CSS code? In theme.liquid?

[hamz1]

Hey pooja_d_92,

Can you tell me to where copy and paste this code step by step, please?