Element width doesn't auto adjust on device rotation

Design help General
1

I have one column that uses the dropdown menu to create an accordion. Thought it was perfect, but now I notice that the width doesn’t change when you change a mobile device rotation — but, this only happens if or after the item has been opened.

Real head scratcher. Not sure why this happens. Is there a fix? Need to get this out asap to prospective jobs/clients. Pretty sure if someone catches this error, bye bye job.

This is where it happens: https://r-paul-seymour.webflow.io/work-connect

Read only link as below. FYI, that right column that contains it is Flex due to this crazy 10px dropdown alignment issue: Dropdown Styling Issue - #4 by Lux — maybe that’s a clue to the problem? If so, I’ve never tried custom code… do I need some to get rid of this horrible alignment fault?

Cheers!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hmm… that’s interesting.
@Waldo @rileyrichter @Brando

1 Like
3

FYI, I took my code/method directly from the example below, and sadly having gone back to test it out, it suffers the same issue :frowning:

https://webflow.com/website/faq-no-code

4

Hi Paul,

I saw your issue pointed out in the discussion on the cloneable page of the faq-no-code accordion.

I came across the issue as well that after you’ve opened one, it doesn’t resize in width anymore. The reason and solution are both simple:

In the interaction, the change in height is set, however the change in width isn’t (as the width doesn’t need to change, it only drops down). However, since the width isn’t set at all, as soon as you click it and the interaction starts to work, webflow sets the width to the current width, and sticks with it.

All you need to do is go to the interaction, and where you see the height change, you also set the width to auto. Voila, it’s fixed.