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.
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.
Hello @Sachin thanks for taking a look
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
@Sachin - thanks for the polite nudge to tidy my sh*t up . 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.