how to make pop up image smaller

[Senku]

Hi, could you help me adjust the image popup size on the product page?
On laptop, it’s too big and people have to scroll.
On mobile, it’s too small and sometimes off-center.
I want it to show the full image properly on all devices — not too big, not too small.

Example site is https://saladtee.store/products/vegan-definition-tee

[topnewyork]

Hello @Senku

Please share store url and password if it is password protected.

[Moeed]

Hey @Senku

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Senku]

thanks but i don’t wanna have that much white space

[GTLOfficial]

Hello @Senku
Go to online store ----> themes ----> actions ----> edit code ----> assets —> section-main-product.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.product-popup-modal__content {
width: 25%;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Moeed]

Try this code instead

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[topnewyork]

Hello @Senku

Try this CSS to adjust the popup for both desktop and mobile devices.

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag

Result:

[websensepro]

Hi @Senku ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!