Responsive Chat

[chrisdevel]

Hi guys,

I am heavily using your chat and it works just awesome. However, I am currently facing an issue with the responsiveness on mobile devices. In the screenshot below I am acceessing the chat from my ipad (9.7inch). The arrangement of text and dialogs depends on horizontal or vertical view (pic1 vertical.jpg, pic2 horizontal.jpg - attachment). Obviously in the horizontal view the text is not displayed / readable anymore.

Due to the html standardization (in my django project) the chat's main.js is implemented into a html file (pic3 html.png- attachment) which is inherited from base.html.

I strongly believe that it has something to do with the meta-tag or viewport in the base.html (e.g. pic4 meta.png). Any clue how to solve this problem? I appreciate your help - many thanks!

[delneg]

You could try setting something like min-height: 60%; for .message-list
Otherwise than that I don't think i know what can be the issue, i'm no css expert.
The components i'm using for the demo are from https://github.com/Detaysoft/react-chat-elements, maybe try updating to a newer version or searching for existing issues there / filing a new issue.

[buneshwarEc]

how to host on server what change do before hosting