Change position of tidio chat mobile view

  • Hi,

    I noticed that the chat button overlaps the shopping cart button for my woocommerce site.

    Is there some way to adjust it so that it pushes it up from the bottom when in the mobile view.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support kamiltidio

    (@kamiltidio)

    Hi.

    Thank you for writing in.
    We’ve prepared a code that can be adjusted to your website so you can move the widget up on mobile/desktop devices :).

    <style>
/*Edit the 3.5 number according to your website for desktop*/
#tidio-chat-iframe { bottom: 3.5em !important; } 
@media only screen and (max-width: 980px) {
 /*Edit the 0px number according to your website for mobile*/
    #tidio-chat-iframe { bottom: 0px !important; }
}
</style>

    The number 3.5em moves the widget up on desktop devices, while the number 0px moves the widget up on mobile devices. By increasing the numbers you’ll change how high the widget will appear.

    Let us know if you’ll need any further help on that case!

    Thread Starter forgetme

    (@forgetme)

    I tried adding the code below to my Style.css sheet in my child template, but it isn’t shifting the button up in the mobile. 

    @media only screen and (max-width: 980px) {
 /*Edit the 0px number according to your website for mobile*/
    #tidio-chat-iframe { bottom: 40px !important; }
}
    • This reply was modified 4 years, 9 months ago by forgetme.
    Plugin Support martintidio

    (@martintidio)

    Hi there!

    Did you try adding a full style rule? It should ensure that the parser knows exactly what to do:

    <style>
#tidio-chat-iframe { bottom: 0px !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat-iframe { bottom: 40px !important; }
}
</style>

    If that won’t help, please reach out to us via chat on our website, or via email, send us over the URL of your website and we’ll look into it.

    Thread Starter forgetme

    (@forgetme)

    Yes I have tried all 3 forms below in my the style.css of my child theme with no change. 

    <style>
#tidio-chat-iframe { bottom: 0px !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat-iframe { bottom: 40px !important; }
}
</style>

    OR

    #tidio-chat-iframe { bottom: 0px !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat-iframe { bottom: 40px !important; }
}

    OR

    @media only screen and (max-width: 980px) {
 /*Edit the 0px number according to your website for mobile*/
    #tidio-chat-iframe { bottom: 40px !important; }
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change position of tidio chat mobile view’ is closed to new replies.