I have a blog section where a user can click ‘read more’ and they can read the rest of the question. The section just opens over the content below it, when I want that content below to still be seen… How can I have the content lower on the page move down when the section above it is expanded?
That’s tricky. I messed around with it for awhile. In reality, you really shouldn’t be using a dropdown component for this. Anytime you use a component for a reason for which it wasn’t design, you’re going to run into problems. And that’s because you can’t see everything that’s going on (css-wise) because it’s been custom-coded in.
I would redesign it with interactions using height: auto. Also, I would used either flexbox or grid for layout, not columns. Columns is another example of an older and custom coded tool that’s always going to be a little wacky and annoying.
Thanks… so I created a new page called ‘test copy’ where I rebuilt this using interactions, but now my issue is the content size varies and when I set the height to fit the largest amount of text, there’s a lot of dead space on most. This content is pulling info from a collection, so I’m not using columns or a grid- it’s the collection that’s giving me the layout. Thoughts?