Return to previous page

Hotspot item elementor how to make it smaller

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

  • Avatar: Javito
    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
    Avatar: Rose Tyler
    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
    Avatar: Javito
    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
    Avatar: Justin
    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
    Avatar: Javito
    Javito
    Participant
    August 9, 2024 at 21:02

    Wonderful, thanks!

    #409702 Copied
    Avatar: Andrew Mitchell
    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: , , , , , ,

  • 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

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Burger Store – WordPress WooCommerce Theme
lazy-placeholder
Online Courses – WordPress WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Hemp & CDB – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.