Can't fit an app made on embed code

Design help Custom code
1

Hello community,

I work on a tool app and it’s work like a charm on w3schools

image
image1948×840 103 KB

When I make the integration on webflow, I put my code in a Richtext code embed mode linked to my CMS tools project.
The rich text is relative and inside a container flex column, children to Section container.

Do you have an idea how I can fix it ?

image
image1591×944 35.1 KB

Kind regard,

Here is my site Read-Only: [LINK][1]

2

Hi there,

For issues related to code embedding and container flex layouts, here are some general troubleshooting steps:

Custom code embeds should be placed within a container element and properly styled to ensure correct display. Check that your container has the appropriate display settings (flex, block, or inline-block) and dimensions. If you’re working with flex layouts, verify that the flex properties (flex-direction, justify-content, align-items) are correctly set.

For more specific guidance, sharing details about your current implementation, including your container settings and embed code, would be helpful.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Edit : Thanks it’s work

4

The reason is your layout combines a lot of flex with element positioning, and has a large <style> chunk in it that targets * and body. It’s going to be very fragile wrapped inside of a normal page design like a “tools” page with a header and a footer that is also affecting that CSS.

I see three issues with your current approach;

  • The Embed inside of your rich text needs to be 100% width.
  • The .controls bar needs to be 100% width
  • You have some competition happening with element positioning and flex that’s pushing the control bar over the main work area.

I’d ditch this approach entirely, and IFRAME it from an external source… a CDN like jsDelivr, or a codepen pro account, or a Netlify zip upload.

Then ditch the rich text, and replace it with a custom element that is an iframe with a src. Bind that to a URL property in your CMS which identifies the CDN URL of each tool you are hosting.

Way simpler to manage, and if your code is in a github repo, you get versioning and the ability to setup testing easily for future mods here.