Issues with the accordion interaction

Hi everyone!
I’m having some issues with the Custom Accordion shown in this tutorial: Create a Custom Accordion – Webflow tutorial - YouTube

When I go to mobile mobile portrait view a few things happen:

  • The right arrow goes off screen.
  • The text inside the toggle (and sometimes the text inside the dropdown list) doesn’t shrink.
  • When I go back to a bigger view (desktop or tablet) some boxes keep the smaller size from the portrait view.
  • Although all dropdown have the same class and style, they end up being different when you changes screen sizes.

Is there anyone having the same problem and is there a way to fix it?
Here I’m sharing a video showing the issues: Webflow accordion issue - YouTube


Here is my public share link: https://preview.webflow.com/preview/teopagos?utm_medium=preview_link&utm_source=designer&utm_content=teopagos&preview=db9b13f7c44d1f1f27335091bb093ebd&workflow=preview
(how to access public share link)

Hi @Jorge_Dominguez,

I hope you are doing well, thanks for the post and welcome to the community.

I think there were a few things going on here, there were a couple of styles that have some max width assigned and some other elements with overflow hidden, so that caused overflow on the page and cause the accordion elements to not resize as you were expecting.

I made a video on how to update this:

One more thing, in my video I told to set the overflow hidden on the accordion item class from overflow hidden to overflow visible, this is a mistake on my part, you can leave that overflow hidden on the accordion item element:

Shared with CloudApp

Hi @cyberdave!
This helped me resolve the issue :slight_smile: thanks a lot! You are amazing!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.