Hi @vejapixel,
I would like to leave a suggestion for you to offer the possibility of moving the balloon both vertically and horizontally separately for desktop, tablet and mobile
We’re really sorry, but probably no.
However, you can do it via CSS. Try the following CSS code:
@media screen and (max-width: 600px)
#wpd-bubble-wrapper {
bottom: 500px;
}
The value of the bottom can be changed.
The CSS code should be added in the Top Admin Bar > Customize > Additional CSS > “Additional CSS” textarea.
Please don’t forget to delete all caches and press Ctrl+F5 (twice) on the frontend before checking.
Thread Starter
Rodrigo
(@vejapixel)
If I insert the line @media screen and (max-width: 600px), it doesn’t work.
It only works if I enter only:
#wpd-bubble-wrapper {
bottom: 70px;
}
The problem is that in this way the css will be applied to both mobile and desktop. And I would like to apply css separately.
Hi @vejapixel,
Please try the following one:
@media screen and (max-width: 600px){
#wpd-bubble-wrapper {
bottom: 500px;
}
}
Thread Starter
Rodrigo
(@vejapixel)
Okay, it worked.
Help me to define the position horizontally. I inserted “left: 87.2%;” and the balloon was in the right place on the mobile, but the numbering was decentralized: https://prnt.sc/wae0gu
And help me to define position (horizontal and vertical) for desktop and tablet.
Hi @vejapixel,
There is no such an issue on our test website.
Could you please leave the example URL to allow us to check it?
Thread Starter
Rodrigo
(@vejapixel)
@vejapixel,
Use the CSS code below:
@media screen and (max-width: 600px){
#wpd-bubble-wrapper {
display: flex !important;
flex-direction: column;
align-items: center;
}
}
