Hello Folks,
I am getting a weried error. On desktop it’s working good but as soon as I swith to mobile I am getting a lot of empty space. But when I check which element is overflowing there’s none.
Just a blank white excess screen when you swip right.
I am not sure what I am doing wrong in this. can you guys please help me.
I will really appericate if you guys help me with this.
Note: There are some elements in website that require sticky elements, so cannot use over-flow:hidden in the main wrapper.
@memetican
Here is my site Read-Only: Link
Hi there,
Horizontal scrolling on mobile devices can be frustrating, especially when sticky elements are involved. You’re right that using overflow: hidden on the main wrapper isn’t ideal since it would break sticky positioning.
The issue typically stems from elements extending beyond their containers. To resolve this, first check your elements’ sizing and positioning to ensure nothing pushes off-screen. Enable X-ray mode in Canvas settings to easily visualize element boundaries and identify overflow areas. You can also hover over the extra whitespace with your cursor to pinpoint problematic elements.
Pay special attention to your interactions and animations, as these can sometimes cause overflow even after completion. Using percentage-based widths and setting max-width: 100% on parent elements can help contain content within the viewport.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hello AI,
That’s quite amaizing.
But yes I have checked it all, but it still showing the same.
That’s why I need someone from the team to help me with this.
Thanks.
@memetican