I'm editing the CSS of my chatbot. After a certain width (around 430px) the chat interface gets completely cut. See images below. How do i solve this?

Hey @brainy-summer-1041 does the glitch occur when you use relative values as well?

@acceptable-kangaroo-64719 i tried with percentages (ex: width: 90% !important;) but it didn't work

@bright-magazine-792 got ay ideas?

yeah gordy, that happens because layout is within the iframe. So we need to expand the iframe width as well here. Manipulating iframe CSS is a bit more technical.

@bright-magazine-792 so, can I do something about it?

You can follow this up https://discord.com/channels/1108396290624213082/1139221950883975198/1139690443282587778

I don't need to put it on the left side

Hey @brainy-summer-1041 ! The thread I've shared with you was more about taking reference on manipulating iframe's CSS I'll provide you with the code, may I know how much width are you targetting?

Around 30% wider

can you share your stylesheet URL from styler so I can edit the css in there?

https://webchat-styler-css.botpress.app/prod/code/3fcd3e4e-d5bc-4bf5-8699-14b621b3ada2/v90569/style.css open the above styler code and paste it in Advanced Styler. You will see the code for editing the

inject.css

(this code is responsible for modifying the CSS properties of the iframe) While you're adding the preconfigured script, you will find a line

<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>

Replace that line with the attached code. This code includes the styler URL as well. so make sure you're updating this stylerURL in the code whenever you make changes to the inject.css section Note: These changes won't be seen in the styler itself. you need to push it to your website to see those changes. I know this is bit complex for this minimal change, but I'm glad to tell you that we're working on a new webchat that would address such issues. Just a matter of a few weeks ❣️ Let me know if anything's not clear, I'm happy to help! @brainy-summer-1041 https://cdn.discordapp.com/attachments/1141317156802400317/1143919474102259722/message.txt

@bright-magazine-792 that way I have to update the code every time I make a change, right?

no, you can use it as preconfigured as well. just replace this

<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>

line with the code that I've provided