Broken accordion layout on mobile

Design help Layout & Design
1

Hi folks!

I used a Relume template for an accordion at the bottom of my landing page, which is currently broken on the mobile view but I can’t seem to find out what the issue is.

When you open the second tab / accordion, the first one becomes blank and on mobile view, the content gets cropped as well. I’ll try to record that on my mobile and supplement it here later.

If anyone has any clue on how to troubleshoot, that’d much be appreciated!! Thank you.

Here is my site Read-Only: Webflow - Make The Dot
(how to share your site Read-Only link)

2

Hi there!

To fix content cropping issues in Webflow accordions, here’s a comprehensive solution:

The accordion container should have these settings:

  • Set position to “Relative”
  • Enable “Overflow: Hidden”
  • Ensure there’s sufficient padding to accommodate the expanded content

For the accordion content panel:

  • Set position to “Static” (not absolute)
  • Set height to “Auto”
  • Remove any fixed height constraints
  • Add appropriate margins/padding for spacing

For mobile responsiveness, double-check that:

  • No fixed heights are set on any accordion elements
  • Content containers use flexible units (%, vh, em) rather than fixed pixels
  • Text elements have proper line-height and spacing values

These settings will ensure your accordion content expands and contracts smoothly without any cropping issues across all device sizes.

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

3

Hi @Emilie_Ho . I’m Sef from Webflow’s Support team. Thanks for sharing the details so clearly — I know how frustrating it can be when something looks great on desktop but doesn’t behave as expected on mobile. Accordion components can be a bit tricky since they rely on interactions and height adjustments, so issues like blank states or cropped content are unfortunately pretty common.

In this case, the behavior is coming from a style applied within one of the Interaction actions. Here’s a screenshot that highlights the specific setting to adjust: Layout on mobile