Streaming live at 10am (PST)

Div wrappers change widths as you scroll down page


#1

Hi guys,

This is my first web flow project, so I’m sure there’s bound to be some slightly …DIY aspects to it :upside_down_face: but where my problem lies in the width of some of the div wrappers I’ve used. They use a dropdown interaction to reveal info on click, but when I view the page and scroll down the width jumps to become much wider and then back again as I continue to scroll. Anyone have any ideas how I can fix this?

You can view them on these pages :

Home > Pricing > Weddings
Home > Pricing > Private Packages

Thank you!
Sarah


Here is my site Read-Only: The Velvet Notes - Function & Wedding Band


#2

Hi @pinaysarah

You have an insane amount of Legacy interactions mixed with IX 2.0 interactions, :crazy_face: which will cause issues, as well as a nightmare finding issues. :crazy_face:

Div Block 20 has a legacy interaction on, which when removed stops the problem. I didn’t look into the interaction setting, as I would recommend removing all of your Legacy interactions.

CloudApp

Hope this helps! :grin:


#3

Hi @magicmark

Thanks for looking into this for me, much appreciated! And I know - I’m sure I’ll figure out a more simplified way of animation my dropdown in future!

I have turned off my Legacy Interactions, however, and it doesn’t seem to be fixing the issue on my end. It’s affecting certain div wrappers on Desktop view, and different ones on iPad view, for example. So, I’m struggling to pin point just what is causing the bug.

Any thoughts would be appreciated. Thank you! :blush:


#4

When you say “turned off Legacy interactions” what do you mean?

Toggling the little switch at the top doesn’t turn them off, that just moves interactions over to IX2.0 interface.

To stop them working you’ll need to select “none” on each one, or the quicker way is to delete them all.


#5

Hi @markos48uk

Sorry for the late reply, and thanks again for getting back to me.

So I have turned them all off (not just toggled interactions off, hehe!) and deleted the majority of unused interactions. However, I still keep having the same issue with the width bugging out as you scroll down the page. Might you have any other thoughts as to what I’m done wrong here?

Thanks so much!
Sarah


#6

@pinaysarah Woohoo! I found the issue!

CloudApp

Also just to add, you’re using pixels for a lot of width, which can make your site less responsive. It may be worth looking at the structure and adding in % or VW where possible to make it more fluid on various devices and browser sizes.

Any issues, let me know!