Streaming live at 10am (PST)

How to: Change the selection in dropdown depending on the width of the div?

Hello,

I would like to do in my project automatic change of position selection in dropdown depending on the width of the div (width change when changing the size of the browser window)

Eg.
I have a dropdown with 3 items:

  • one
  • two
  • three

I would like the “one” position to be selected when a particular div has more than 1200px, “two” when a particular div has more 800 - 1200px etc.

Can it achieve this effect in embedded Webflow Interactions?

Thanks for tips!

Is it really a dropdown you want - to be able to choose from the list? Or different content depending on viewport size?

Look at the example:
I have a dropdown with 3 options to choose from. When choosing, for example, “tablet” - div changes its width to the set value.

However, you can change the size of the div using “sizer” (gray border with icon). I want the dropdown item to change automatically when using “sizer”.

You can certainly do that with 3 images… Just show them based on selection.
Hmmm… You might have to make your own drop down though :wink:

Do you know if Webflow allows to show / hide specfic elements (divs) depending on the size of the div?

Eg.

  • Show layer A when div is 765px wide
  • Hide layer A and show layer B when div is 700px wide

I am talking about own “breakpoints” - not the standard in Webflow (web / tablet / mobile)