Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 22, 2020 at 4:01 pm #1224618
    GrainneA

    Hi

    I have ‘Blank Hotspot’ set in the Styling section of ‘Image with Hotspots’ but the numbers are showing on mobile devices (it is fine on a desktop).

    I have the following code in my quick CSS as I wanted to make the hotspots bigger so I don’t know if this is affecting it:

    @media only screen and (min-width: 990px) {
    .responsive .av-image-hotspot {
    height: 70px;
    width: 70px;
    line-height: 70px;
    }
    .responsive .av-image-hotspot-pulse {
    top: 70px;
    left: 70px;
    }}

    I tried following this https://kriesi.at/support/topic/hotspots-on-mobile-numbered-when-should-be-blank/ but it didn’t work

    Can anybody help???

    June 24, 2020 at 1:48 pm #1225192
    Victoria

    Hey Grainne,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    June 26, 2020 at 3:09 pm #1225856
    GrainneA

    Thank you for getting back to me.

    Re the image you posted – it’s the small 1, 2, 3, 4, 5 that need removing from the image (can you see them on the circles?), if you look on a desktop they aren’t there – they are set to be blank hotspot but come up like this on a mobile. I want them hidden.

    Thank you
    Grainne

    June 26, 2020 at 5:25 pm #1225942
    Victoria

    Hi Grainne,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:767px){
    .main_color .av-hotspot-fallback-tooltip-count {
        display: none;
    }
    .av-hotspot-fallback-tooltip-inner {
        margin-left: 0px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 29, 2020 at 12:22 pm #1226375
    GrainneA

    Hi
    Thanks for the code but it’s still not working.

    I added it to the general styling section and cleared the cache but the numbers still appear on mobile devices (desktop & ipad are ok).

    I then added it to the Additional CSS section in Themes > Customise but it didn’t make any different (I cleared the cache too)

    I then added it to Theme Editor > CSS > Custom.css (also cleared the cache) but its still the same

    I have removed it from all of them for now.

    Thanks you
    Grainne

    June 29, 2020 at 12:26 pm #1226377
    Yigit

    Hey,

    Could you please create temporary admin logins and post them here privately so we can look into it? Code Victoria shared should have worked :)

    Cheers!
    Yigit

    June 29, 2020 at 12:34 pm #1226384
    GrainneA

    Thank you :-)
    Grainne

    June 29, 2020 at 12:43 pm #1226389
    Yigit

    Hi,

    I added the code to bottom of Quick CSS field and cleared cache on your caching plugins. Please review your website :)

    Best regards,
    Yigit

    June 29, 2020 at 12:56 pm #1226395
    GrainneA

    Hi

    It’s still not working.

    Just to clarify – it’s not the numbers next to the tooltips that need to be removed, it’s the numbers on the actual image – the circles have numbers on them 01,02,03,04,05 that are part of the image but the hotspots are positioned on each circle on the image and are set to be ‘blank’ but they are showing the numbers 1,2,3,4,5 (only on a mobile device) – does that make sense? I’ve included a screenshot of the image on a mobile device.

    Thank you
    Grainne

    June 29, 2020 at 1:03 pm #1226398
    Yigit

    Hi,

    Thanks for the clarification, clearly we were not on the same page :)
    I changed the code to following 

    @media only screen and (max-width:767px){
.av-hotspot-blank .av-hotspot-container .av-image-hotspot_inner {
    opacity: 0;
}
}

    Please review your website :)

    Best regards,
    Yigit

    June 29, 2020 at 1:07 pm #1226403
    GrainneA

    YES! Thank youuuuuuuuu, perfect :-)

    Just one more question if you don’t mind? Is it possible to have the numbers next to the tooltips or does it not work like that once they are set to blank? no worries if that’s the way they need to be.

    Thank you
    Grainne

    June 29, 2020 at 1:20 pm #1226415
    Yigit

    Hi,

    I deleted following code from enfold/css/custom.css file

    @media only screen and (max-width:767px){
    .main_color .av-hotspot-fallback-tooltip-count {
        display: none;
    }
    .av-hotspot-fallback-tooltip-inner {
        margin-left: 0px;
    }
}

    We thought you wanted to delete those numbers. I deleted it from Quick CSS field while changing the code however did not check other files. It should be the way you want it now :)

    Best regards,
    Yigit

    June 29, 2020 at 1:40 pm #1226425
    GrainneA

    Yes, its perfect, thank you so much
    Grainne

    June 29, 2020 at 1:59 pm #1226431
    Yigit

    Hi Grainne,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Blank hotspot showing numbers on mobile device’ is closed to new replies.