Custom css in shopify inbox app for mobile view

Shopify Apps
1

Hello,

I’m Using the shopify inbox app and I have added some custom CSS for mobile devices but it’s not working
is there any solution for that?

2

Hi @Jitali_2103

Could you show me the code you added?

3 
@media screen and (max-width: 768px) {
button.chat-toggle.chat-toggle--icon-button {
  height: 44px;
  min-width: 44px;
  padding: 12px;
  width: 30px;
  border-radius: 50%;
}
button.chat-toggle.chat-toggle--icon-button svg {
  height: 30px !important;
  width: 30px !important;
}
}
4

Please try to update the code to this and check if it works

@media (max-width: 767px) {
button.chat-toggle.chat-toggle--icon-button {
  height: 44px;
  min-width: 44px;
  padding: 12px;
  width: 30px;
  border-radius: 50%;
}
button.chat-toggle.chat-toggle--icon-button svg {
  height: 30px !important;
  width: 30px !important;
}
}

If it is still not working, please use this code

@media (max-width: 767px) {
button.chat-toggle.chat-toggle--icon-button {
  height: 44px !important;
  min-width: 44px !important;
  padding: 12px !important;
  width: 30px !important;
  border-radius: 50% !important;
}
button.chat-toggle.chat-toggle--icon-button svg {
  height: 30px !important;
  width: 30px !important;
}
}
5

Hi @Jitali_2103

can you share your store url direct to your button that cant custom style ( with password if needed) so I can figure out problems

6

Your CSS still not Working
Can you please check the preview below?
https://o1p0ofyzc810e9oi-68640112942.shopifypreview.com

7

This is the preview
https://o1p0ofyzc810e9oi-68640112942.shopifypreview.com

8

You hide the chat button on mobile. Could you show me where did you add the code?

9

When you scroll up to down you can see the chat button and down to up then you can not see the chat button I have added js for that.
I added CSS in the custom.css file

10

I cannot see custom.css is using. Please try to add code to base.css file

11

Hi @Dan-From-Ryviu ,
As you said I just added css in the base.css file but it still doesn’t work.

Jitali_2103_0-1723519996986.png
Jitali_2103_0-1723519996986.png666×847 34.5 KB

12

Having trouble with custom CSS not working on mobile sounds a bit like dealing with mod compatibility issues in Toca Boca Life World. Just as mods need to be compatible with the game version, make sure your CSS selectors are targeting the right elements and that media queries are correctly configured for mobile devices. Using !important might help override conflicting styles. It’s also a good idea to clear your cache and test on various devices, similar to troubleshooting any issues you might face with mods in Toca Boca. If it persists, check forums or support for additional solutions.

13

Hello @shonetakelor ,

I have tried everything but its button doesn’t make any difference. Please let me know if there is any other way to get it.