Creating a complex diagram using relative positioning tool - falls apart when viewed on Chrome and Firefox browsers

Hi there,

I’m attempting to create a circular diagram using 27 individual components. Each component will have hover interactions and up to five links contained within them. I have pulled all of the components together using relative position with a combined use of the position edit and z-index tools. I haven’t begun adding any of the linkable content within the individual components yet. The diagram will ultimately need to look something like this:

The published project looks as it should when viewed on Safari. However, when I view it on Chrome and Firefox, the whole layout falls apart.

Firstly, does anyone know what is causing it to break on Chrome and Firefox?

I’d also really appreciate some feedback on whether there are any other potential roadblocks with creating a diagram of this complexity using Webflow? Is using relative position the right way to go? Is it even possible to develop this using Webflow?

Here is my Webflow site link: https://preview.webflow.com/preview/social-impact-toolkit-diagram?utm_medium=preview_link&utm_source=dashboard&utm_content=social-impact-toolkit-diagram&preview=6765937c6795611c9298ba1a9d26e7a3&mode=preview

Here is the published link: https://social-impact-toolkit-diagram.webflow.io

Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hey! did you got some answer to your problem?

Not sure what Paul’s problem was but you want to make the container relative and the children absolutely positioned within that space.

Sizing would present another issue, so I’d probably design it at the low edge of the breakpoint to make sure it fits.