How can I resize the inbox widget on mobile view?

[MiaPascua]

Hello! I just need to make the widget smaller as it looks too big on mobile view.

I'm using the Publisher theme.

https://everlyadorned.com/

[Dan-From-Ryviu]

Hi @MiaPascua you can try to add this CSS code before </body> tag of your theme.liquid file 

<style>
@media screen and (max-width 749px) {
button.chat-toggle { 
height: 50px !important; 
width: 50px !important;
}
button.chat-toggle svg {
height: 28px !important;
}
}
</style>

[MiaPascua]

The code didn't change anything. 😞

[Dan-From-Ryviu]

So I guess it does not accept customize CSS code. You can try to check if is there any option to edit size of that button in shopify chat app dashboard?

[INA_MSWEB]

Hi @MiaPascua 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
#dummy-chat-button-iframe {height: 50px !important; width: 50px !important;}
button#dummy-chat-button.chat-toggle {height: 45px !important; width: 45px !important;}
button.chat-toggle svg {height: 25px !important;}

Regards,

San

[Cedcommerce]

Hello @MiaPascua, 

You can resize or adjust the width of the chat widget for mobile view on the Publisher theme with the help of a CSS code.

You can follow the below steps to do the same.

Please note that this widget is rendered from the app and is contained within an <iframe> tag. 

As <iframe> doesn't allow customization inside it, you need to scale down the widget, resulting in a smaller button and chat area. 

To achieve this, please follow the steps below.

Go to Shopify Admin Dashboard and click on Online Store -> Themes.

Click on the Actions button -> Edit Code.

Now go to the Assets folder and click to open the theme.css.liquid file.

Add the following CSS code at the bottom of the file:

Find the code provided below:

@media only screen and (max-width: 767px) {

#ShopifyChat {

transform: scale(0.8);

transform-origin: bottom right;

}

}

Now save the changes to your theme.

Note: This code will scale down the Shopify inbox widget to 80% on screens with a maximum width of 767 pixels (typically the size of a mobile device screen). If you want to change the value of the scale, replace 0.8 with any value between 0 to 1.

Hope this resolves your issue. In case you need any further help, please connect with us.

All the best, 

CedCommerce 

[MiaPascua]

Hi. I couldn't find theme.css.liquid file under Assets. I found theme.liquid instead. I tried pasting the code there after </body> </html> but there are still no changes.