Cannot make adjustment to container style for mobile screens.

[PreciousNiphemi]

I a trying to make the chat box size look bigger on mobile screen, and maintain it's current size on bigger screen. There is no provision for different media queries sizes

[OvidijusParsiunas]

Hi @PreciousNiphemi. Could you elaborate on what you mean by chat box size look bigger on mobile screen, and maintain it's current size on bigger screen. If you want to use different styling based on the device you are using e.g. web vs mobile, you can add conditional styling values to the chatStyle. This may vary depending on the Framework you are using, but here is a simple example:

if (isMobile()) {
  chatElementRef.chatStyle = {width: '100wh', height: '100vh'}; 
} else {
  chatElementRef.chatStyle = {width: '400px', height: '300px'}; 
}

If you want the style to be more dynamic - I recommend checking out the max-width, max-height properties along with calc values.

If you really insist on using media queries, you can use them with the !important value in your app's css style which will overwrite the styles used in Deep Chat. However we do not recommend going in this direction as using !important is a little bit of an anti-pattern in general terms of css and overwriting some Deep Chat styles carries a chance of disrupting internal Deep Chat styling functionality - so use this at your own risk:

@media (max-width: 1478px) {
  deep-chat {
    width: 400px !important;
  }
}

@media (max-width: 400px) {
  deep-chat {
    width: 100% !important;
  }
}

Let me know if these options work for you. Thanks!

[OvidijusParsiunas]

I will be closing this issue since there has been no further communication. Feel free to comment below or for anything else create a new issue. Thanks!