How to reduce the size of the chat-app bubble only for mobile?

[roughsketch]

Want to reduce the size of the chat app bubble
Tried java script to access the TOM element to change the sizing with important tag, but that doesn't work 

[rajweb]

Hey @roughsketch ,

To reduce the size of the chat bubble specifically for mobile, you can use CSS targeting media queries. If JavaScript overrides haven't worked, applying custom CSS might be more effective. Here’s how you could do it:

1. Identify the class or ID of the chat bubble element using your browser's developer tools (right-click the bubble > "Inspect").

2. Use a media query for mobile to ensure this only affects mobile views. For example:

@media only screen and (max-width: 767px) {
    .chat-bubble-class {
        transform: scale(0.7); /* Adjust to desired size */
        width: auto !important;
        height: auto !important;
    }
}

Replace .chat-bubble-class with the actual class or ID of your chat bubble element.

2. Add this code to your theme's CSS file (usually theme.css.liquid or custom.css) in the Shopify theme editor.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[GTLOfficial]

Hello @roughsketch 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->style.css
add this code at the end of the file and save.

button.chat-toggle {
height: 40px;
width: 40px;
margin: 0;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[roughsketch]

As there's no style.css this should be done in base.css? @GTLOfficial 

[GTLOfficial]

Yes, base.css
if you want icon to be more small then you can use this css

#ShopifyChat {
transform: scale(0.6);
}

result

Thanks

[roughsketch]

Yes I want icon as smaller but only for mobile. Thanks

[roughsketch]

The chat box also transformed.