Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 16, 2018 at 4:38 am #913078
    wizard247

    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

    February 16, 2018 at 8:43 am #913173
    wizard247

    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

    February 17, 2018 at 9:08 am #913577
    Victoria

    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

    Smooth Scrolling

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 18, 2018 at 12:44 am #913739
    wizard247

    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

    February 18, 2018 at 8:35 am #913823
    Victoria

    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

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