Home > Customizations > Chats > Online button > How to customize chat button size for mobile view

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'] {
  -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.

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us


+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved