How to customize chat button size for mobile view

Depending on the mobile configuration of your site, chat button might sometimes appear too large, or take too much space of the mobile view.

By customizing the CSS, you can set the button to reduce size when the site is viewed on mobile/tablet device.

 

First you need to click on Live Chat with right mouse button and 'inspect element' (In Chrome, in other browsers basically just check the chat's source code).

You will find the div ID - b_12345678 - copy only this, without the rest 


Then you need to add the following code to your website's CSS styles:

 

@media (max-width: 750px) {
div[id*='b_6be2d1fb'] {
  -moz-transform:scale(0.7);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
} }

You can adjust the scaling as needed (lower number means smaller button), also don't forget to replace the chat button ID code on the 2nd line.

×