Hotspot Size on Mobile Devices
-
Hi,
I’ve added some hotspots to an image, but on mobile devices they appear too large and cover the product, making it difficult to see.
Could you please let me know where I can adjust the hotspot size specifically for mobile devices? I would like to make the hotspots smaller on mobile while keeping the current size on desktop.
Attachments:
You must be
logged in to view attached files.
Hello,
Could you please confirm whether you would like to reduce the hotspot icon/dot size on mobile devices or the product/content popup size that appears when hovering/clicking the hotspot? This will help us guide you to the correct setting.
Best Regards
I would like to reduce the hotspot icon/dot size(green color) on mobile devices. Or maybe is any option to remove the color?
Hello,
Reduce Hotspot Dot Size. Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile:
/* Reduce overall container size & adjust centering offset */
.wd-image-hotspot {
width: 14px !important;
height: 14px !important;
margin-top: -7px !important;
margin-left: -7px !important;
}
/* Adjust inner dot indicator */
.hotspot-icon-default .hotspot-btn:after {
top: 5px !important;
left: 5px !important;
width: 4px !important;
height: 4px !important;
}
Change or Remove Hotspot Dot Color, Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile:
/* Remove background color / make transparent */
.hotspot-icon-default .hotspot-btn {
background-color: transparent !important;
box-shadow: none !important;
}
/* Hide surrounding pulse sonar animation on mobile */
.hotspot-sonar {
display: none !important;
}
Best Regards,
And a CSS to reduce the window size with the product on dot?
Attachments:
You must be
logged in to view attached files.
Hello,
Try to use the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.
/* Reduce overall popup window width */
.hotspot-content {
width: 180px !important; /* Default is 250px */
padding: 10px !important; /* Reduces inner spacing */
}
/* Reduce product image size inside the popup */
.hotspot-content img {
max-width: 100px !important;
margin: 0 auto !important;
}
/* Reduce title and price font sizes */
.hotspot-content .wd-entities-title {
font-size: 13px !important;
}
/* Make Add to Cart button more compact */
.hotspot-content :is(.btn, .add_to_cart_button) {
padding: 4px 10px !important;
min-height: 28px !important;
font-size: 11px !important;
}
Best Regards
.
