Product Page

My product image gallery is too large to display fully on the browser. I want the image gallery to automatically adjust its size for different screen sizes. How can I achieve this?

I added this CSS to the product layout page.

Attachments:

You must be logged in to view attached files.

I added this CSS code simply to make the product image gallery fixed on the left side.

This is true for all products; perhaps you have a better solution.

Hi there,
Thanks for reaching out.

Please check this example and let us know if this behavior/layout would work for you: https://take.ms/BAwkD

Kind regards,
XTemos Studio

No, that’s not what I need. The image isn’t displaying completely. I need an image of the same proportions, with other parts appropriately scaled down, like the image I gave you (image 2).

Attachments:

You must be logged in to view attached files.

What I need is to achieve the display effect shown in picture 2 on computer screens of other sizes.

ok

Hi there,

Sorry, I posted a custom code snippet for this in another topic. Please check if it works for this issue

.wd-single-gallery {
  display: flex;
  justify-content: center;
}
.wd-single-gallery .woocommerce-product-gallery {
  width: 63vh;
}

Let us know once it’s added.

Kind regards,
XTemos Studio

Why were my mobile app changes made again? I don’t want the mobile app to be changed as well.

Attachments:

You must be logged in to view attached files.

Why was the image gallery in the details also shrunk? I don’t want it to be smaller.

Attachments:

You must be logged in to view attached files.

Hi there,
Thanks for the clarification.

We didn’t know you’re using two galleries on the single product page. To make the custom code affect only the main gallery (and not the details section or mobile), please do the following:

1) Add a unique class to the column that contains your main product gallery:
– Class name: wd-add-gallery-width
– Where to add: to the gallery column, as shown here: https://take.ms/snXbQ

2) Add this custom CSS for desktop:

.wd-add-gallery-width .wd-single-gallery {
  display: flex;
  justify-content: center;
}
.wd-add-gallery-width .wd-single-gallery .woocommerce-product-gallery {
  width: 63vh;
}

This will apply the width only to the gallery inside that specific column, avoiding changes to the additional/detail gallery and mobile.

Let us know once it’s added and how it looks on your side.

Kind regards,
XTemos Studio

[Author]

Posts