Hi all!
My client has requested that I add a board of advisors section, with headshots and bio paragraphs.
Currently, I have them placed in a grid. I have the bios set as a trigger animation, so that the bio box is hidden unless clicked—which is working great. The issue is that I’d like the bio box to span the width of the grid when it is revealed.
But, since the dropdown wrapper is a child of the grid, I’m not sure how to overlay the bio box when it pops up. Is there a way to do this? I’m new to WebFlow, but seems like there would be an easy fix out there.
Any and all help is greatly appreciated!
The section I’m referencing is towards the bottom, with circular headshots
Here is my site Read-Only:
https://preview.webflow.com/preview/nusachi?utm_medium=preview_link&utm_source=designer&utm_content=nusachi&preview=c9dbea6b12699050723d2ed0cc5101f3&mode=preview
@WhoaNelly.Design Welcome to Webflow! I wouldn’t wrap it all in one div. Spit your headshots and your dropdown in two rows of a grid. Than you can span the bio box over all columns.
Thanks Matthias!
One concern there, when it stacks on mobile, it upsets the order in which the elements show up—bios fall under the wrong image. Keeping in mind we will be adding more people to the group, I’m wondering if there’s a workaround.
Switch to manual. Than you have full control of your order.
1 Like
Perfect!
Thank you so much for the quick and helpful response!
1 Like
Hey Matthias, sorry, I spoke too soon.
Not quite sure what I’m doing wrong, but when I change my grid cells to manual, they end up stacking in this strange way.
https://preview.webflow.com/preview/nusachi?utm_medium=preview_link&utm_source=designer&utm_content=nusachi&preview=c9dbea6b12699050723d2ed0cc5101f3&mode=preview
The headshots fill out side by side in columns, but the “bio trigger” buttons stack on top of each other in rows.
