Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Mobile image displaying too large

Solved

Mobile image displaying too large

CStudios
Excursionist
11 0 4

When I click to view an image larger on mobile, it becomes too big.

How can I adjust it so it doesn't get so large?

URL: https://www.cadeaustudios.com/products/cincin


Accepted Solution (1)

BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

@CStudios  

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media (max-width: 767px) {
 .product-images-gallery .large-image {
   max-width: 100% !important;
 }
.product-images-gallery img {
 aspect-ratio: 1.2 !important;
}
}

- Here is the result you will achieve:

 

BSSTekLabs_1-1719842076774.png

 

 

 

- 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 5 (5)

Moeed
Shopify Partner
6330 1716 2069

Hey @CStudios 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find base.css file

4) Remove the following code from line number 10150

.product-images-gallery .large-image {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    object-position: center;
}

RESULT:

Moeed_0-1719837658007.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


CStudios
Excursionist
11 0 4

Thanks @Moeed 
It now looks the same size as the version before you click it. 
Is there another way user can zoom or enlarge an image? 

BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

@CStudios  

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media (max-width: 767px) {
 .product-images-gallery .large-image {
   max-width: 100% !important;
 }
.product-images-gallery img {
 aspect-ratio: 1.2 !important;
}
}

- Here is the result you will achieve:

 

BSSTekLabs_1-1719842076774.png

 

 

 

- 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
CStudios
Excursionist
11 0 4

Thank you!!

BSS-TekLabs
Shopify Partner
2350 688 810

You're welcome. Have a great 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