Clicking on Product image in mobile makes the Images too Large with no pinch function..

Store Design
1

On Mobile when I click the magnifier or image it opens the image in lightbox but it has no pinch function. It just fills the screen to its actual image size.. I currently have the theme settings set to ‘Open lightbox’ - I need to add either the ability to open image within a container or adjust it for screen size. Only on Mobile - Here is a link to one of my product pages - https://devildaves.com/products/blaster-liquid-bloody-mary-seasoning

Can anyone give me some base.css or code to help make this look and function correctly for mobile.. Thank you

1 Like
2
  • Here is the solution for you @Ryanp
  • 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 screen and (max-width: 749px) {
    .product-media-modal__dialog .global-media-settings{
 width: 170% !important;
}}
  • Here is the result you will achieve:

BSSTekLabs_0-1721388757101.png
BSSTekLabs_0-1721388757101.png384×801 351 KB

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

Excellent thank you. Is there a way to make the image have margins and then also the ability pinch and zoom once opened in the model?

1 Like
4

This can be done. But need to access your store to customize code

5

Hey sir - Nevermind. I added it to the CSS in the Theme editor and it worked great! Thank you!

1 Like
6

If you need any help just let me know. Have a nice day @Ryanp .

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

Is there a way to make swipe function on images once they open in their new frame?