Mobile image displaying too large

[CStudios]

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

[Moeed]

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:

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

Best Regards,
Moeed

[CStudios]

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 · Accepted solution]

@CStudios  

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

- 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:

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

[CStudios]

Thank you!!

[BSS-TekLabs]

You're welcome. Have a great day!