In Sense theme, click to enlarge on desktop makes the images extremely large

Store Design
1

I’m unable to view the images that are enlarged, because they’re so big that it cuts off the information.

I used some code found in another post to solve the issue on mobile but desktop remains the same:

.product-media-modal__content .global-media-settings {
width: 100% !important;
}

Thanks in advance!

2

Hi, you can add this CSS to restrict the maximum width of the enlarged images,

.product-media-modal__content img {
    max-width: 500px;
}

If you need help with any other theme edit tasks, feel free to checkout our app. We provide unlimited theme edit at $8/hr or $49/mo. The first task is free.

3

First open the file section-main-products.css and go to line 761

Or where you see this code

@media screen and (min-width: 750px) {
  .product-media-modal__content {
    padding: 2rem 11rem;
  }

  .product-media-modal__content > * {
    width: 100%;
  }

  .product-media-modal__content > * + * {
    margin-top: 2rem;
  }

  .product-media-modal__toggle {
    right: 5rem;
    top: 2.2rem;
  }
}

Here are a few edits you can do.

Replace

.product-media-modal__content > * {
width: 100%;
}

with

.product-media-modal__content > * {
    /*width: 100%;*/
    max-height: 100vh;
    width: auto;
  }

What this edit will do is basically ensure the max height of the image doesn’t go over the browsers max height. Which basically makes sure the images will always fit on the viewers screen

4

Hi,

If you are looking to differentiate the mobile view from the desktop one, you could use the below CSS code as a starting point.

@media (max-width:768px) {
.product-media-modal__content .global-media-settings {
width: 100% !important;
}
}
@media (min-width:768px) {
.product-media-modal__content .global-media-settings {
width: 900px !important;
margin:0 auto;
}
}

You can change the values as you please, whether is based on pixels, or %.

Cheers!