![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: hotspot, responsive, tablet
-
AuthorPosts
-
February 16, 2018 at 4:38 am #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,
Wizard247February 16, 2018 at 8:43 am #913173OK – 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,
Wizard247February 17, 2018 at 9:08 am #913577Hi 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,
VictoriaFebruary 18, 2018 at 12:44 am #913739Thank 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,
Wizard247February 18, 2018 at 8:35 am #913823Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.