Whatsapp Widget - Making it larger

Ask the Community Customization
1

Hi The Whatsapp widget appears very small when I load the webpage on the mobile screen. Any custom CSS to make it bigger?

1 Like
2

Hi @Gaurav1 and welcome to the forum!

Could you please send me the link to the page with the widget in question? I’ll be happy to help :slight_smile:

3

Hi Helga,

This is on a test page. Link below.

http://ec2-3-231-60-15.compute-1.amazonaws.com/

Regards,
Gaurav

1 Like
5

Thanks for the link!

I’ve checked your website and as far as I can see it is not mobile friendly yet, hence the issue with small content.

To make it mobile friendly, please add the following script to your page header:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

And if you’d still love to change the size for your widget, please add the following CSS code to Custom CSS section in your widget Appearance tab:

@media (max-device-width: 600px) {
  .global-styles, [class^="Bubble__BubbleComponent"] {
    transform: scale(1.3);
    margin-left: 30px;
  }

  .global-styles,
  [class^="Window__WindowComponent"] {
    margin-bottom: 105px;
  }
}

Please let me know if it helped :raised_hands:t2:

6

Thanks it did work !

1 Like
7

Awesome, thanks for the update! :slight_smile:

8

Connect for my whatsapp number +251915012016