Product image too large on product page (Horizon theme) - how to reduce size?

Store Design
, ,
1

Hi everyone,

I’m using the Horizon theme (3.1.0) on Shopify and I’m trying to reduce the size of the main product image on the product page.

Right now the image appears very large and takes up too much space. I would like to make it smaller while keeping it centered and without breaking the layout (slideshow arrows, zoom, etc.).

I tried adding custom CSS (targeting .product-media__image, .product-media, and slideshow elements), but either nothing changes or it breaks the layout (extra white space, arrows disappear).

Is there a proper way to control the product image size in Horizon theme?

Thanks in advance!

2

Hey @Roman_S Welcome to Shopify Community can you please share the Website URL

3

Hello,

yes, pls https://www.luxury-and-you24.de/

4

I just tried adding the following CSS to base.css:

.product-information__media slideshow-slide .product-media {
  height: 60vh;
}

and it actually worked. The image size is now reduced.

Do you think this is the correct approach, or could it cause issues (e.g. with responsiveness, layout, or different image ratios)?

5

Hey @Roman_S can you please share the screen shoot that which image is look so big

7

Hello @Roman_S, try find this code and change the width or height.

Capture
Capture438×135 2.83 KB