Join the Webstudio community

Updated 6 months ago

Chatbot form that connects to OpenAI

At a glance

The community member is seeking assistance with their text expanding past the box it is contained in. They have tried to emulate the previous text line (light blue) but the issue persists. The community member is working on a project to create an element where users can chat with OpenAI and have a conversation.

In the comments, another community member suggests using max-width: 100% on the text and paragraph, as well as setting overflow-wrap: break-word to address the issue of the text expanding past the box. This solution is noted as helpful by the original community member.

Useful resources
Hello, I'd like some assistance on why my text keeps expanding past the box it is contained in. I've tried looking at the previous text line (light blue) to try to emulate what was done there but it still persists.

And just to be clear, this was the very first page I started working on when I purchased Webstudio, in an attempt to see what was possible and test my hand at web development. I worked on another project and decided to revisit this page and try to fix some things up with what I've been picking up working on my other project. So please excuse the mess, I was testing things out here.

The attempt here, in the screenshot, was making an element where you can chat with OpenAI and have a conversation. If there is a resource where this was done properly, I'd welcome the assistance and resource.

https://apps.webstudio.is/builder/50405d42-de50-4705-a74e-640e2292bf88?authToken=1de6857f-9111-4465-a5dd-f921cd4cafe0&mode=preview
Attachment
image.png
B
J
3 comments
also, trying to make it responsive and at 991 px, the chat area (field with the conversation bubbles) is preventing the page from containing everything without a scroll bar at the bottom of the page.

i checked the widths and everything is on auto
You need a max-width on the text and paragraph of 100% and then also set "overflow-wrap: break-word". You have no spaces between characters, it doesn't know where to start the next line. You can see how it works here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
Thank you very much for this! It helped out a lot!
Add a reply
Sign up and join the conversation on Discord