Community forum for knowledge and support

Updated 8 months ago

Issue with layout 348

At a glance

The community member is experiencing an issue with the layout of their website, where the images are no longer sticking to their designated positions as the user scrolls. They have not made any changes, but the images are now staying stuck at the top of the screen instead of scrolling with the content.

Other community members suggest that the issue might be related to the "Position: sticky" property not working as expected. They recommend checking for any "overflow hidden" on parent divs and using "overflow clip" instead. The original poster confirms they do not have any "overflow hidden" set, but they were able to resolve the issue by changing the layout from a single row with auto height to four separate rows.

The community members discuss potential solutions, including changing the layout to a four-column design, and the original poster shares a link to their website for further testing. However, there is no explicitly marked answer in the comments.

Useful resources

#issue with layout 348 - I don't think the images stick to where they are supposed to anymore. I didn't make any changes at all, and now even if I re-import the component, the images are changing like they are supposed to, but they are not sticking to the screen as I scroll. They just stay stuck at the top.... HELP WANTED!!

N
M
6 comments

It kind of seems like "Position: sticky" just isn't working... that looks like the only problem.. but it's so odd.

Make sure you do not have overflow hidden on any parent divs to this component. Use overflow clip instead. Send a read only over if that doesnt resolve it

Yeah.. I didn't have any overflow hidden set - I double checked that. Not sure..

But anyway, I just made it 4 separate rows instead of one row at auto height and it works the exact same way, the interactions are the same. I'd potentially recommend changing it to a 4 column layout. It's literally the exact same (maybe if each copy section were severely different heights there would be a problem, but mine are all relatively similar).

Thanks for the reply though!

My site is here if you want to take a look.. I could potentially get you a backup copy to test, but probably not worth the hassle, it's working now.
https://chefjoann.webflow.io/

Hey Nick - I’ll need the read-only in order to help! Tia

I see you are saying its working now - I might have additional questions later

Yeah, so it didn't work if I imported it directly from Relume -> Webflow, but like I said, going from 1 row (with Auto Height), to 4 rows, and putting each image in a row, worked. Sending Read only in a DM

Add a reply
Sign up and join the conversation on Slack