# WhatsApp Chat Customization

**URL:** <https://community.elfsight.com/t/whatsapp-chat-customization/25576>\
**Category:** Customization\
**Tags:** whatsapp-chat\
**Created:** [November 14, 2023, 4:13pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576 "2023-11-14T16:13:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fernando\_Gomez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fernando_gomez/32/11058_2.png) [@Fernando\_Gomez](https://community.elfsight.com/u/Fernando_Gomez)\
**Post date:** [November 14, 2023, 4:13pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/1 "2023-11-14T16:13:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 14, 2023, 5:21pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/2 "2023-11-14T17:21:10Z")

</div>

Hi @Fernando_Gomez 👋

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:

```auto
@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 🙂

---

<div class="post-metadata">

**Author:** ![Fernando\_Gomez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fernando_gomez/32/11058_2.png) [@Fernando\_Gomez](https://community.elfsight.com/u/Fernando_Gomez)\
**Post date:** [November 14, 2023, 6:14pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/3 "2023-11-14T18:14:49Z")

</div>

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](https://www.coc-online.com)

Best regards.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 14, 2023, 6:18pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/4 "2023-11-14T18:18:45Z")

</div>

Thank you!

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 15, 2023, 10:03am UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/5 "2023-11-15T10:03:30Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Fernando\_Gomez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fernando_gomez/32/11058_2.png) [@Fernando\_Gomez](https://community.elfsight.com/u/Fernando_Gomez)\
**Post date:** [November 15, 2023, 11:16am UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/6 "2023-11-15T11:16:51Z")

</div>

Still not working. Picture attached.

 ![image.png](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/6/69e5504f762b57e54c8c2d8dfa38bdb2382bb24b.png)

Thanks,

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 15, 2023, 11:48am UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/7 "2023-11-15T11:48:29Z")

</div>

I am sorry!

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

```auto
@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 🙂

---

<div class="post-metadata">

**Author:** ![Fernando\_Gomez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fernando_gomez/32/11058_2.png) [@Fernando\_Gomez](https://community.elfsight.com/u/Fernando_Gomez)\
**Post date:** [November 15, 2023, 12:16pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/8 "2023-11-15T12:16:47Z")

</div>

Now it works!

Thanks!!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 15, 2023, 12:18pm UTC](https://community.elfsight.com/t/whatsapp-chat-customization/25576/9 "2023-11-15T12:18:51Z")

</div>

You are always welcome 😉