Interactive Component Breaks/Fails to Resize in Browser

Design help Animations & Interactions
1

Hello Webflow Community,

I’m a new to Webflow and am experimenting with accordions.

I used this file as a template:
https://preview.webflow.com/preview/faq-no-code?utm_medium=preview_link&utm_source=showcase&utm_content=faq-no-code&preview=95f42ccbec97f007e4f79285a4ef5a94

When resizing in a browser the individual “accordion modules” do not respond - in the Designer everything looks the way it should. After opening/closing the modules and refreshing the browser the components reload and resize per the design.

Is there a weird DOM thing happening here? I’ve stared at this for hours and can’t figure out how to fix via settings.

Here is the coded page and preview below:
https://artefacture-beta-v01.webflow.io/accordian-test

Thanks to anyone with suggestions.
-A

Here is my public share link: LINK
([how to access public share link][2])

2

Welcome to the community @artefacture!

I noticed a similar problem with my navigation element recently and I realized that it was because there wasn’t a width set within my interaction styles. After taking a look at what you’ve created for the accordion open/close, it looks like you’re missing the width value as well:

image

If I update all of the interaction styles to include 100% for the size, I’m able to open/close the accordion and resize the browser window without issue:

image

Hopefully that helps, but feel free to reach out if you’re still having issues :metal:

3

Hi Mike,
That worked! Appreciate the help. Very happy to join the community. I am sure I will be back :slight_smile:
Thanks,
A

1 Like