product images size

Hello. I wanted to add shadows and borders to the product images. For this, I added a CSS definition to your Elementor product gallery module. Then, by writing custom CSS to that definition, I achieved the desired shadows and borders. However, there’s an issue. Dynamically, your theme is making the image height about 20px taller. Is there a way for me to fix this? I didn’t want to interfere with your function files as they might get lost during updates. Thank you for your assistance.

By the way, I didn’t want to apply styles directly to the ‘img’ tag inside the gallery because the images are masked within the gallery, causing the shadows to be contained inside. That’s why I added the styles to a div above it. The style I added is as follows:

.screen_box_mindsoar .woocommerce-product-gallery__wrapper {
    border-radius: var(--wd-brd-radius);
    border: 1px solid #E5E5EA;
    box-shadow: 0px 36px 89px rgb(0 0 0/4%), 0px 23.3333px 52.1227px rgba(0,0,0,.03), 0px 13.8667px 28.3481px rgba(0,0,0,.024), 0px 7.2px 14.4625px rgb(0 0 0/2%), 0px 2.93333px 7.25185px rgba(0,0,0,.016), 0px 0.666667px 3.50231px rgba(0,0,0,.01);
}

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section:

figure.woocommerce-product-gallery__wrapper.owl-items-lg-1.owl-items-md-1.owl-items-sm-1.owl-items-xs-1.owl-carousel.wd-owl.owl-loaded.owl-drag .owl-stage-outer.owl-height {
    height: 588px !important;
}

Best Regards.

Thank you, my friend. I appreciate it. However, it’s not responsive this way. I actually tried this approach initially, exactly the same. But when I access it from a mobile device, the product image becomes a rectangle 🙂 or as the screen width increases, the image size becomes messy. It doesn’t maintain the aspect ratio. I’ve tried various CSS methods for this, but I couldn’t succeed.

Hello,

Please check it now on other devices. I have added the code in the Custom CSS for the Desktop section.

Best Regards.

No, I don’t think we can solve this problem. Thank you. I will solve it with function. Thank you for your concern.

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts