Accordion not responsive after user interaction

Hello People

Can someone help me figure out why the following Project Accordion stops being responsive after the toggle interaction has been activated? I can’t locate the problem / find a solution.

Any guidance would be massively appreciated :pray:t4:


Here is my site Read-Only: Webflow - Rite Constructions
(how to share your site Read-Only link)

Hey @hazelgrove In this case, you need to tell the accordion parent i.e, container to have a max-width and adjust the typography size based on the breakpoint.

Hope this helps :peace_symbol:

Hello @Sachin thanks for taking a look :ok_hand:t4:
I have 2 questions to help clarify the problem:

1 - By giving the accordion parent a max-width what does this effectively do? (Just so I understand why). My next step is to refine type styles. But wanted to make sure the content performs efficiently before fixing the breakpoints?

2 - My main issue is the non-responsive accordion content after you click on / activate the accordion. See attachment. The accordion that has been viewed, remains at the size it was viewed at if the browser width is changed.

The max-width CSS property sets the maximum width to the ‘‘container’’ and stops it from scaling beyond the given value.
Generally, we use one of these values to structure our content

Please use the Client-First system to structure your website most of your issues will be resolved.

@Sachin - thanks for the polite nudge to tidy my sh*t up :stuck_out_tongue_winking_eye: :+1:t4:. I’ll get my head around the Client-first approach and see if I can clean it up a little. For now, I’ll keep hacking away.

Good to know there is a global system to make things easier. Thanks for sharing.

1 Like