Mobile image displaying too large

Retired Boards Appdev Store Design
,
1

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

2

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
Moeed_0-1719837658007.png372×668 76.5 KB

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

Best Regards,
Moeed

3

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?

4

@CStudios

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

step.png
step.png1865×854 125 KB

  • 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
BSSTekLabs_1-1719842076774.png360×297 84.9 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

Thank you!!

6

You’re welcome. Have a great day!