Re: Product Image Issue

Solved

Product Image Issue

Testing120
Excursionist
29 0 8

My Product Page first image of product start showing to small on mobile and desktop both as seen below:

 

img (1).png

 

Then I added following code in my theme file editor /assets/base.css

 

 

" .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
height: 500px !important;

"

after using this code my image start showing good on desktop device but on mobile device it start showing starched image

Like this on my mobile:

WhatsApp Image 2024-07-22 at 11.51.57 PM (1).jpeg

 

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
2336 692 819

This is an accepted solution.

You can try add this code @Testing120 

@media only screen and (min-width: 600px) {
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
height: 500px !important;
}
}
@media only screen and (max-width: 600px) {
 .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 300px !important;
height: 300px !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 6 (6)

BSS-TekLabs
Shopify Partner
2336 692 819

This is an accepted solution.

You can try add this code @Testing120 

@media only screen and (min-width: 600px) {
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
height: 500px !important;
}
}
@media only screen and (max-width: 600px) {
 .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 300px !important;
height: 300px !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2336 692 819

Delete the old code and replace it with the code above @Testing120 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Testing120
Excursionist
29 0 8

let me try 

Testing120
Excursionist
29 0 8

super this code work

BSS-TekLabs
Shopify Partner
2336 692 819

Glad to help you. Have a good day.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

AK_Design_Dev
Shopify Partner
187 16 16

Hello @Testing120 

 

Don't use fixed width and height, 

 

Use both 100%

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link:-

Contribution


Contact On My Mail :-[email protected]