How to change full screen settings on Krown Themes

Store Design
1

Hi there,

I use krown themes.

My product page image automatically zooms the image when on full screen. Mobile and desktop version (when not on full screen) work well.

Full screen zooms image and cuts off the product.

see here - > https://www.roguegalleries.com/products/comic-book-marvels-flash-323-cgc-8-5

This also happens on the collection pages - >

https://www.roguegalleries.com/collections/graded-comics

the image zooms in and gets distorted.

How can we fix that so images stay crisp and especially on the product page - the whole image is visable.

thank you

2

Hi @RogueGalleries ,

You can try to add this code at the bottom of your theme.css.liquid file of your theme

.product-gallery--slider {
height: 100% !important;
}
3

Hello, @RogueGalleries ,

To resolve this issue, you need to add this code by following these steps:-

  • Go to your Shopify admin > Online store > Themes
  • Select your theme > click on actions > edit code
  • Open theme.liquid from the layout folder
  • Add the code below just before the
  • Save the changes.

Find the code below:-

{% if template.name == “product” %}

#shopify-section-product .product-gallery{ height: 100%!important; }

{% endif %}

Result:-

Cedcommerce_0-1665579501105.png
Cedcommerce_0-1665579501105.png300×124 31.9 KB

image.png

It is advisable to make the changes if you are experienced with Liquid code. If you find it difficult to do then, please contact a Shopify expert agency like us.

Let us know if you need any help.

All the best,

CedCommerce

4

Thank you - that worked great.

is there a piece of code to then reduce the image size? Would be good to have the image fit without having to scroll down.

your fix was applied - see here - > https://www.roguegalleries.com/collections/graded-comics/products/comic-book-marvels-ultimate-spider-man-1-cgc-9-4

Would be ideal to have the image be seen as it is but without being so large as to need a scroll.

thank you