Interaction is changing my grid size when clicking

I am making an accordian and have been following some other webflow set ups but just can’t get mine to work! I’ve managed to apply interactions to open and close the accordion and I’m happy with how that looks. But when I open the accordion it shifts the size of my grid. I have no idea what is causing it to move. I think it has something to do with the Size interaction I’ve used but I can’t understand why the width of the grid changes when its only the height I’m changing the size of my element.

I’m also having issues where if the accordion is open is stops being responsive - again I’m out of ideas as to what is causing this as the content is responsive in the designer.

Any help would be amazing!

Here is my public share link: Webflow - Bo Studio

Hi Emma!

Try setting your first column’s width to something more “fixed” like 30%.
It should keep it from going smaller thus fixing the interaction

Thanks for taking a look at this! I’m using a grid so not sure how to set a column to be specific? Or should I be using a column instead of a grid? Thanks!

Right now you have two columns in your grid.
[2 in desktop and tablet (f i remember correctly, I’m on my phone) and 1 in smaller breakpoints]

The first is 0.5fr and the second 1fr.

If you change the first column to something like 30%, it will always be 30% of the width of the grid.
You can use pixels if you prefer, but i think the percentage will be easier for you to use. :slight_smile:

check also this

hi @Emma_Campbell
Your issue is related to your animation. When you change width of your element to 100% your tab should be responsive.

PS: IMO you should stay with fr units as they are great companion for CSS Grid because they were specially made for CSS Grid but of course you can switch to any other units if you wish.


Thanks Stan, you legend! That has worked perfectly!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.