How can I resize large product images on the Sense theme?

Store Design
1

Hello there,

I’ve tried a couple of solutions on boards but I’m not finding that they work for my theme (Sense)

The Product images, when clicked on, Zoom to full width and it’s not great customer experience.

Is there any way to reduce this to maybe 50% or about 600px?

I’ve tried the following thanks to some useful previous posts:

.product-media-modal__dialog { width: 50%; margin: auto; } into the bass.ss

and also this one (along with some tweaks in Snippets):

.product__modal-opener .product__media-icon { display: none !important }

Thank you!

2

Hello @LucyW1315 ,
Please share your website URL.

1 Like
3

@LucyW1315 ,

Share the store URL.

1 Like
4

Store URL is pechefraiche.com - pw to view is alexa

5

Thank you! Just added in above

6

Thank you! Just added in above

7

@LucyW1315 ,

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

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

8

As far as I can tell - that still hasn’t worked. Seems to still be full width.

9

@LucyW1315

Add this CSS bottom of the base.css file

.product-media-modal {
width: 60% !important;
left: 20% !important;
top: 10% !important;
}

@media(min-width: 280px) and (max-width: 767px){
.product-media-modal {
width: 100% !important;
left: 0px !important;
top: 0px !important;
}
.global-media-settings {
width: 100% !important;
}
}
}

10

Thank you - this doesn’t seem to work either :thinking:

11

@LucyW1315

Add this CSS below of theme.liquid after closed tag.

.product-media-modal { width: 60% !important; left: 20% !important; top: 10% !important; } @media(min-width: 280px) and (max-width: 767px){ .product-media-modal { width: 100% !important; left: 0px !important; top: 0px !important; } .global-media-settings { width: 100% !important; } }
1 Like
12

That’s worked! Thank you very much!

If I want to reduce it a little more, do I alter the max-width or reduce the percentages proportionately? Looking at it I might need to reduce again!

13

Hi @Mans - can you help me with the same issue.

Here is my website, as you can see the variant images of the lipstick are blowing up huge!

https://b3klgv3olbttgfbe-57628327996.shopifypreview.com/products/lipstick