WhatsApp Chat Customization

Ask the Community Customization
1

The Icon interferes with my bottom menu, is there a way to displace the bubble icon some pixels upwards?

1 Like
2

Hi @Fernando_Gomez :wave:

If I understood you correctly, you’d like to do this only for mobile.

In this case, please try to add this code to the Custom CSS field on the Appearance tab:

@media (max-width: 475px) {
.Bubble__BubbleComponent-sc-13azvyr-3, .Window__WindowComponent-sc-1wwhwms-1 {
    bottom: 67px;
}
}

Check it out and let me know if it worked :slightly_smiling_face:

3

Hi Max,

Yes, it is only on mobile version.

I tried the code as you suggested in CSS Appearance in elfsight, but doesn´t seem to work.

My website is www.coc-online.com

Best regards.

1 Like
4

Thank you!

I’ll check it with our devs and will let you know once any news come up :slightly_smiling_face:

5

Please try to use this code instead and let me know if it worked:

@media (max-width: 475px) {
[class*="Bubble__BubbleComponent-sc"] {
    bottom: 67px;
}
}
6

Still not working. Picture attached.

image.png
image.png650×507 14.3 KB

Thanks,

1 Like
7

I am sorry!

We’ve adjusted the code and added it to the Custom CSS:

@media (max-width: 475px) {
  .global-styles,
[class*="Bubble__BubbleComponent-sc"] {
    bottom: 67px;
}
.global-styles,
[class*="Window__WindowComponent-sc"]{
  margin-bottom: 196px;
}
}

Check your website and let me know if you like what you see :slightly_smiling_face:

8

Now it works!

Thanks!!

1 Like
9

You are always welcome :wink: