Screenshot
https://share.getcloudapp.com/KouBRBA2
this is happening on mobile
I see you have
wpd-tooltip-position="left"
and
wpd-tooltip-size="long"
How do I change those to
wpd-tooltip-position="RIGHT"
and
wpd-tooltip-size="WIDE"
on mobile only?????
Hi @goodlab,
Please provide us some example URL to debug the issue and provide a solution for you.
@asti sorry, forgot to include url
https://www.inyourgarage.com/listings/1968-dodge-dart-gts-numbers-matching/
Please try this code:
@media screen and (max-width: 600px){
[wpd-tooltip-position="left"]::after {
left: 31%;
top: 50%;
margin-left: 157%;
}
}
Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.
Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.
Also, please try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.
@asti Thanks, it worked, kind of. Now the entire tooltip is visible but is is squished to the left of the flag, and the pointer parts is covering some of the text, and the mouse is pointer is still on top so more of the text is covered.
You should use this js code:
if (jQuery(window).width()) {
jQuery.each(jQuery('.comment_flag[wpd-tooltip]'), function () {
jQuery(this).attr('wpd-tooltip-position', 'top');
});
}
Note: the CSS code provided by us was removed from the textarea.
Here is an instruction: https://www.collectiveray.com/add-javascript-to-wordpress
