Suggestion : Separate offset settings for desktop, tablet and mobile

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.

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;
   }
}

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?

https://pop.proddigital.com.br/

@vejapixel,

Use the CSS code below:

@media screen and (max-width: 600px){
   #wpd-bubble-wrapper {
      display: flex !important;
      flex-direction: column;
      align-items: center;
  }
}

It was ok now. Thanks!