Custom css in shopify inbox app for mobile view

[Jitali_2103]

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?

[Dan-From-Ryviu]

Hi @Jitali_2103 

Could you show me the code you added? 

[Jitali_2103]

@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;
}
}

[Dan-From-Ryviu]

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;
}
}

[Jitali_2103]

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

[Dan-From-Ryviu]

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

[Jitali_2103]

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

[Dan-From-Ryviu]

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

[Jitali_2103]

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

[BSSCommerce-HDL]

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

[Jitali_2103]

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

[shonetakelor]

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.

[Jitali_2103]

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.