--> Step 1, go to the webchat settings, styles tab https://cdn.discordapp.com/attachments/1274766710003466351/1274766805180743823/image.png?ex=66c3729a&is=66c2211a&hm=eeae3e9ddd658b66e1a74f6faddafb39e776c10b02c0c1d4cb66449b62669912&

--> Step 2, paste this code

@media only screen and (max-width: 396px) {
  .bpMessageListScrollbarViewport{
    padding-bottom: 105px; 
  }
}

For the width of the viewport, keep something under 500px (default width of the webchat) Hoewever, if you want to change the width of your webchat (reduce it), you will have to reduce this max-width https://cdn.discordapp.com/attachments/1274766710003466351/1274766915264319569/image.png?ex=66c372b4&is=66c22134&hm=d2c466f114ec2265107a3f6bde841064c9f953e1c27ec061ae8258926080b3be&

--> Step 3, hit save https://cdn.discordapp.com/attachments/1274766710003466351/1274767012924489922/image.png?ex=66c372cb&is=66c2214b&hm=71b322cb3d426b62bc71d4b1fb2213720b93d1470c46b4248b0beb69872fa12a&

And that's it ! you should be able to see the full conversation on mobile tell me if that helps 😉

Second fix : automatic zoom on the textarea on mobile just add this css :

@media only screen and (max-width: 396px) {
   .bpComposerInput{font-size: 16px;}
}

same thing for the viewport widht ! 3rd : tip - change only the color of the outgoing messages (user's messages)

[data-direction="outgoing"] > .bpMessageBlocksBubble > p {
color:red;
}

works with the same code but with incoming instead of outgoing

Maybe you also knows a fix for: If i change the .bpMessageBlocksBubble color, the bot and the user text bubbel will both change to that color. Is there an why to do that seperatly?

" @media only screen and (max-width: 396px) { .bpMessageListScrollbarViewport { padding-bottom: 105px !important; } .bpComposerInput { font-size: 16px !important; } .bp-widget-webchat { max-width: 320px !important; margin: 0 auto !important; } } "