Accordion with Pictures - Problem resizing window

Design help Animations & Interactions
1

Hi,

I don’t know if it’s a bug or just me doing things wrong (I can’t remember if I always had this issue or if I just discovered it now).
I’m making an accordion with pictures inside, but when I add the interaction, the pictures start to act weirdly when I try to resize the window (if you’ve clicked on the title before resizing). And the weird part is that it works on the design page, but not in the preview or when I try in Safari… And when I delete the interaction (then the pictures are not hidden anymore) the problem stops and the picture stays in place, so it makes me think it’s not a position problem but maybe a bug…?

Thanks,
Corentin

Public link : https://preview.webflow.com/preview/corentinbureau?utm_source=corentinbureau&preview=1fd9e4c18ff310eb09aefc3bd2322f9c

Website : https://corentinbureau.webflow.io

22
22953×712 345 KB
11
111312×921 218 KB

1 Like
2

Hey @Corentin_Bureau

Not sure about the problem, but when I open the site in the browser the images are moving to the right while resizing the browser.

Same problem occurs when I open the interaction and use the handle to resize. See here > https://www.loom.com/share/1c71471ab9414c63b854d329a106ff42

I’m thinking about adding a 100% width to the interaction. When I add a width 100% the problem disappears. The only strange thing is that I need to first add 100% width to the current step HEIGHT AUTO > add a step before for the width > delete the width from the step for the height. Same thing with the close interaction. Not sure if this makes sense :smile: See a video here > https://www.loom.com/share/ae045948c9c14edfa423f1797dfb0391 Follow step by step

Try and let me know what’s happening :webflow_heart:

3

Hi @PeterDimitrov

Thank you very much for your help! I followed your steps and it works perfectly! :ok_hand:
Would you also have an idea on how to properly fix the picture to the middle of the title? As you see it kinda move up on the title as you resize down the window… (For now I had to do a different negative margin for tablet and phone, but it’s not perfect…) (Maybe there is a tutorial existing on this subject already?)

Thanks again!

1 Like
4

Hey man :raised_hands:

Give me some time to check :webflow_heart:

5

Hey ! Thanks for your help again, I managed to find a solution for my second problem ! :wink: I’m starting to understand how things work!

1 Like
6

Hey man! Sorry for the late response. Happy to hear :webflow_heart: