graphicdop

Hello, @tofupalwp! Thank you! Problem resolved by adding a Classic editor plugin.

Hi @conartstudio, thank you! I already did this, but it broke the layout, all columns are shifting to the right and there’s empty space between the Product description, product data, and product short description. Product setting custom meta box from Woodmart theme also shifting to the right column, although it’s supposed to be on the bottom under the RankMath SEO settings tab

Hello! @ironprogrammer I don’t have Classic editor, I have advanced editor, how do I fix the layout in this case?

Thank you!

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.

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.

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

Regards,

Olga

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

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

Indeed. Not working at all. I tried links from Vimeo, from youtube, it’s just not playing at all