Hi guys,
I’ve build a stacking card design with the position sticky. It’s working perfectly but on mobile it’s not working at all.
Anyone that can help me with this?
Here is my site Read-Only: Webflow - Studio Atlas 2.0
Hi there,
When working with position sticky on mobile devices, several factors can affect its behavior. Here are the common issues to check:
- Parent elements with overflow settings (hidden, scroll, or auto) can prevent sticky positioning from working properly. Review the overflow settings in your parent containers.
- Parent elements with fixed heights may interfere with sticky behavior. Try using min-height instead of height where possible.
- For vertical scrolling, ensure you’ve set the correct distance values (top or bottom) for your sticky element.
- If your element uses flex or grid layouts, check your alignment settings as they can impact sticky positioning.
You can learn more about overflow settings in our University article, and review our documentation on flex and grid layouts for alignment best practices.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hi @Miel_Pannecoucke
You need to work with .section.2 and made overflow: visible
Make sure the parent element has a defined height, as that can affect how sticky works. Also, check if any CSS properties like overflow are interfering. If you’re still having issues, consider using a JavaScript solution for better control.