Single product image is too long

Hello @graphicdop,

Thanks for reaching out!

Generally speaking,?image sizes for single products?default to an uncropped 600px wide. However, your theme or custom CSS can also override these defaults.

To further troubleshoot this for you, could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select Get system report and then Copy for support. Once you’ve done that, you can paste the text in?https://gist.github.com. After that, you can paste the Gist link here in your reply.

Can you also confirm if you have any active Custom CSS or Code Snippets?

Looking forward to your response.

Hello, Rajesh! Thank you very much for response and help,

Here is the link to GitHub as you requested: https://gist.github.com/GraphicDOP/1d96ea8cc896dd5fbba45221f8dbed64

As for the code snippets I only have hidden overflow:

html,
body{
width:100%;
overflow-x:hidden;
}

And I had additional code to make thumbnails on the side of the product image, but I removed it as it’s blocking videos from playing.

Thank you,

With Kindest Regards,

Olga

Hi @graphicdop

This is a theme-specific issue, and we don’t provide help & support for 3rd-party plugins or themes as they’re outside our support scope. It would be best to reach out to the theme or plugin developers (Elementor Support) you used to build your site for further assistance.

Meanwhile, you can follow their guide on editing single product page template: https://elementor.com/help/woocommerce-single-product-builder/

Feel free to let us know if you have any more questions or need more help. We’re always happy to help!

Hello, @shameemreza,

Thank you very much for your response, I’m aware of Element’s single product builder, there’s no such option to optimize single product image height. Contacting Elementor’s support was my first action, however, they sent me here (please see attached screenshot).

Now, what should I do? How do I resize it?

https://www.dropbox.com/scl/fi/gx63wcxelowg8bun0goxs/Screenshot-2024-09-03-at-15.48.36.png?rlkey=6rzr5jvi4u1g9qrrwkd9bg66s&dl=0

Thank you,

With Kindest Regards,

Olga

Hi! It’s ok, I did it with CSS. Thank you very much for looking into my case.

Regards,

Olga

Hey, @graphicdop!

I’m glad to know you were able to fix the issue ??

I’m going to close this thread now okay?

If you feel comfortable in sharing the CSS code you used to solve it, it would be a great contribution to the WooCommerce Community and might help other users in the future ??

Please let us know if there’s anything else we can do to help or if you have any questions.

Have a wonderful day!

Hello, @carolm!

Sure! I would love to contribute! I also added breakpoints, but I’m still adjusting sizes for all screens as I’m still working on the desktop layout, however, anyone can adapt them to their needs, just change the numbers for width and height.

Please, note that first, I added a CSS class: “size” to the “Product images” widget, you can do it in Elementor, then I wrote this code for the class: “size”, that’s why at the beginning of the code you can see the class name, size. I hope it will be clear enough for the users.

I wrote this code in the Theme customizer, not in Elementor editor.

Here is the code:

.size img {
width: 100%;
height: 100%;
max-width: 565px;
max-height: 565px;
object-fit: cover;
}

/* Media query for screens larger than 1200px */
@media (min-width: 1200px) {
.size img {
max-width: 565px;
max-height: 565px;
}
}

/* Media query for screens between 992px and 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
.size img {
max-width: 500px;
max-height: 500px;
}
}

/* Media query for screens between 768px and 991px */
@media (min-width: 768px) and (max-width: 991px) {
.size img {
max-width: 400px;
max-height: 400px;
}
}

/* Media query for screens between 576px and 767px */
@media (min-width: 576px) and (max-width: 767px) {
.size img {
max-width: 300px;
max-height: 300px;
}
}

/* Media query for screens less than 576px */
@media (max-width: 575px) {
.size img {
max-width: 400px;
max-height: 335px;
}
}

Thank you,

You can close the topic now.

With kindest regards,

Olga

• This reply was modified 2 months, 3 weeks ago by graphicdop.
• This reply was modified 2 months, 3 weeks ago by graphicdop.

Please, note that first, I added a CSS class: “size” to the “Product images” widget, you can do it in Elementor, then I wrote this code for the class: “size”, that’s why at the beginning of the code you can see the class name, size. I hope it will be clear enough for the users.

Thank you!

• This reply was modified 2 months, 3 weeks ago by graphicdop.