Solved

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

parthpatel05
Tourist
7 0 1

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

 

Screenshot 2024-02-15 at 9.09.38 AM.png

 

Here's an example of how it should look:

Screenshot 2024-02-15 at 9.46.15 AM.png

Accepted Solution (1)

pooja_d_92
Shopify Partner
132 16 18

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

Pooja Devi

View solution in original post

Replies 4 (4)

pooja_d_92
Shopify Partner
132 16 18

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

Pooja Devi
parthpatel05
Tourist
7 0 1

I appreciate your help Pooja. It worked perfectly.

pooja_d_92
Shopify Partner
132 16 18

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

 

Thanks

Pooja Devi
igues
Visitor
1 0 0

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