Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #913078

    Hi,

    Please see my test page: https://lateraldrafting.com.au/infographic-2/ (pw in private content below)

    When I reduce the screen size, the tooltip boxes run off the edge of the screen. How can I make them responsive, i.e. percentage width so they will adjust to the screen width, until the mobile layout kicks in?

    Thanks,
    Wizard247

    #913173

    OK – I fixed this by setting the width of the tooltip in vw units.

    div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-right.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot,
    div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-left.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot {
    width: 26vw;
    }

    However, the buttons that I used for the “Read More” do not automatically adopt the smooth scroll feature like the hotspot numbers do. I read elsewhere in this forum that this is default behaviour for anchors but for me they don’t work.

    I had to use span id’s in the Accordion titles in order to get the anchors linked. If I use the toggle ID number, it makes no difference. Still no smooth scroll.

    Any ideas why this is not working?

    Thanks,
    Wizard247

    #913577

    Hi Wizard247,

    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: 768px)  and (max-width: 1025px){
      div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-left.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot {
        width: 23vw;
        left: -170px !important;
        min-height: 200px;
      }
      .avia-tooltip p {
          font-size: 1.3vw!important;
          line-height: 1.5em!important;
      }
      div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-right.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot {
        left: 44px !important;
         width: 23vw;
      }
    }
    

    Here is a nice smooth scroll option

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #913739

    Thank you – I found a fix with css for the first problem.

    Regarding Smooth Scrolling: I had found that link too but not sure how to implement it in Enfold. I thought Enfold does this with all page anchors out of the box?

    Failing that – where do I put this JS as Enfold does not have a custom JS section in Theme Options?

    Thank you,
    Wizard247

    #913823

    Hi Wizard247,

    You can add JavaScript to the functions.php like this

    
    function add_smooth_scroll(){
    ?>
    <script>
     //your script
    </script>
    <?php
    }
    add_action('wp_footer', 'add_smooth_scroll');
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.