Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1282851

    Is there a way to change the size of the clickable area in an image hotspot?

    I have a map. I am NOT showing any tooltips. And, the pulses are transparent. The person needs to click on the name of plot of land and then will go to the specific area. What I would like to do is pretty much double or triple the size of the clickable area to make it easier to find and click.

    Please see the “Site Map” at http://wsbp.wpengine.com/sites/. (hosted on WPengine)

    Thank you.

    #1283152

    Hey rmatus,

    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 (min-width: 990px) {
        .responsive .av-image-hotspot {
            height: 100px;
            width: 100px;
        }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1283191

    For those following this discussion, you need to also change the margins around the hotspot. Otherwise, the hotspot starts in the same place and then goes to the right and down. Here is what I did to create a large circle of 200px, which is centered in the right place:

    /* Hotspot circle size */
    @media only screen and (min-width: 990px) {
    .responsive .av-image-hotspot {
    margin-left: -100px;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    }
    }

    #1283448

    Hi rmatus,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.