hotspot image size

Hi,

How can I decrease the size of hotspot image on desktop to be a little bit smaller (https://prntscr.com/q7czli) and increase the size of the image on mobile to be bigger? https://prntscr.com/q7czos

Hello,

In the image hotspot element there is an option to set the size for image. But it will effect all the screens.

But you want to decrease the size of hotspot image on desktop and increase the image size on mobile.

You can try yours custom CSS class in that element and set the size by hitting that specific class.

Or let me know where you used your hotspot image share the page URL so I can try and help you out.

Best Regards.

hi

this is the page https://www.enuesque.com/p/director/

The image size on desktop is fine. It’s just the image size for the mobile is small and I’d like it to be bigger. this is the page https://www.enuesque.com/p/director/
thanks

Hello,

To increase the size of hotspot Image. I define a custom CSS class in your hotspot element as “imageSize”.

Then I target that class to increase the image size only in the mobile screens. I used the below CSS in your product page CSS area:

@media only screen and (max-width: 768px) {
.imageSize{
width:130%;
}
}

Screenshot for clarification: https://jmp.sh/Y9NbC6k

Best Regards.

Thanks, however when I make the image bigger the image tends to keep moving to the right side. How can I have the image centered on mobile please.

Most Welcome,

As the image goes bigger the image tends to keep moving to the right side. To adjust the margin so the image will display in the center. You can use the below CSS code:

@media only screen and (max-width: 808px) {
.imageSize{
width:180%;
margin-left: -30%;
}
}

You can adjust the margin according to you. Currently I use -30% but you can increase or decrease the value.

Best Regards.

[Author]

Posts