Disable horizontal scroll on mobile caused by absolute positioned elements

[ed9333 (Eugenia Digon)]

Hello,

I’m having trouble with the mobile version of a page on my website. There’s a horizontal scroll appearing, much probably caused by two absolute-positioned div blocks.

To preview the problem, open this link on a mobile phone: https://www-blockstack-d63682afc5326964230c5494.webflow.io/nftnyc

Here’s what I already tried:

• Setting basically everything to overflow hidden - does NOT solve the problem
• Unsuccessful custom code

I would really like to keep the animations on these divs and the absolute positioning (which makes possible said animations…)

I have no idea what else to try and would appreciate a lot any help
Thank you!

---

Here is my site Read-Only: https://preview.webflow.com/preview/www-blockstack-d63682afc5326964230c5494?utm_medium=preview_link&utm_source=designer&utm_content=www-blockstack-d63682afc5326964230c5494&preview=0f837a135edd6f4186262509414b0c5e&pageId=616d9fd7e8dfed0dcf4c2744&workflow=preview

[Veronika_Viachireva]

Hi! Check your grids! They span for 20 columns each and it’s causing all that extra space to appear. Try removing the unnecessary columns on mobile and don’t forget to change your grid child position, so it doesn’t occupy 20 columns anymore.

Hope this helps

[ed9333 (Eugenia Digon)]

Thank you but I don’t think that’s the problem, columns are responsive… It’s not like the 20 columns of desktop viewport are overflowing on mobile, mobile has the 20 columns adapted to the responsive size

[Veronika_Viachireva]

I went ahead and removed the extra columns in your read-only link and it seemed to have solved the problem. You might as well try.

[ed9333 (Eugenia Digon)]

So if I understood well: You edited the columns to be… which quantity of columns? And that didn’t affect the responsiveness in other viewports?

Thank you for your help!

[ed9333 (Eugenia Digon)]

I put everything in one column and the problem persists on mobile… Can you please specify exactly what you did to have it fixed? Thank you again

[Veronika_Viachireva]

Changing styles in mobile does not affect other viewports whatsoever.

I didn’t remove any columns per se, I edited the position of the grid child like this (you have to go through every grid on the page and change this property for it to work):

So you just edit the column end property to 4 instead of 20 for every grid child on the page and it does the trick.

[ed9333 (Eugenia Digon)]

I did that and now not only the problem persists but also everything looks messed up… I honestly have no idea how are you fixing the problem

[ed9333 (Eugenia Digon)]

I fixed it adding custom code… Thank you for the suggestions anyway!!

[Nicolas_Gavrilenko]

Ed9333, can you share the code ?