Return to previous page

Hotspot item elementor how to make it smaller

This topic has 6 replies, 4 voices, and was last updated 4 months, 2 weeks ago ago by Andrew Mitchell

Javito

Participant

July 26, 2024 at 15:29

Hi,

I want to make the hotspot item smaller. The smallest size I can achieve is 40 x 40px even though I am uploading an svg that is 30 x30px. I tried with custom code but I couldn’t either, can you think of how to achieve it? i’ve attached screenshot

Thank you so much!

Files is visible for topic creator and
support staff only.

#407169 Copied Theme version: 9.3.16

5 Answers
Rose Tyler

Support staff

July 28, 2024 at 07:33
Hello,

Thank you for reaching out to us with your query. We understand that you are trying to make the hotspot item smaller.

We would recommend adding the next custom CSS code in settings of the element:
```
.etheme-hotspot-item {
    max-width: 25px;
    max-height: 25px;
}
```
https://gyazo.com/fa0e9f94b318a35e9c3b79cdf3068fd8

Best Regards,
8Theme’s Team
#407311 Copied
Javito

Participant

July 29, 2024 at 21:39

Hi,

thanks for the code.

The weird thing is that is working OK for hotspots at homepage https://sitetemporalok.site/ but at product pages is not working
even though is the same class ex: https://sitetemporalok.site/producto/borcegui-blues/.

I’ve attached screenshots so you can see better.

Kind regards

Files is visible for topic creator and
support staff only.

#407677 Copied
Luca Rossi

Support staff

July 30, 2024 at 08:51
Hi @Javito,

For the home page:
```
.etheme-hotspot-item {
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;    
}
```
For single product page:
```
.single-product .etheme-hotspot-item {
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;    
}
```
https://prnt.sc/khj4pQKW-FbL
https://prnt.sc/yXKH0b2ZdnrV

Hope it helps!
#407756 Copied
Javito

Participant

August 9, 2024 at 21:02

Wonderful, thanks!

#409702 Copied

Andrew Mitchell

Support staff

August 9, 2024 at 21:02

Dear Javito,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#409703 Copied
Tagged: elementor hotspot size, elementor hotspot tips, hotspot resizing guide, make hotspot smaller, woocommerce hotspot adjustment, woocommerce template customization, wordpress elementor tutorial
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Hotspot item elementor how to make it smaller’' has been successfully resolved, and the topic is now closed for further responses

Hotspot item elementor how to make it smaller

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection