Can some one help me please

Hello guys, I’m having this horizontally scroll which I don’t know how to get rid of. I do not even know when this even happened.

This is my only view link
https://preview.webflow.com/preview/capiproduct?utm_medium=preview_link&utm_source=designer&utm_content=capiproduct&preview=964b565c50933638bdd45df6dddd0693&pageId=6321a1e40caa328c4fa7041a&itemId=632c2db42c8ac004a015e048&workflow=preview

Hey @Account_Capi, you have set a fixed width of 450 px; to your sticky div blog side. This is causing the overflow you’re experiencing.

Thanks so much, you made my day

I’m so sorry to say this but can you check the problem on my home page too, I don’t know why only the blog post was fine but not the homepage.

@Account_Capi No problem at all. I can see the horizontal overflow on your live site, but not inside the Webflow Designer. Please generate a new read-only link and paste it here so I can have a look. Thanks!

This is the new link, please let me know if something wrong
https://preview.webflow.com/preview/capiproduct-234d79271eeb3da3ae8225f98e7?utm_medium=preview_link&utm_source=designer&utm_content=capiproduct-234d79271eeb3da3ae8225f98e7&preview=fde46905e99227c96d94cc29bccfbbde&workflow=preview

@Account_Capi, thanks for the link.

It looks like the cause of the horizontal scroll can be found here:

Body content > Hero > Container (1.) > Interactions > Hero Animation (Scroll) > Circle Image (Scale).

I have found this by deleting your sections one by one. Doing this helps you narrow down the location. When you have found the section, look at all of the elements inside and repeat the process until the causing element can be determined.

I hope this helps.

Thank you so much for everything. It seems like the circle Image (Scale) interaction isn’t the cause, I’ve tried your method and found out that: Body content > track > Sticky(yes only this div, not the children inside its). I still don’t know how to fix this since I hadn’t touched this at all :frowning:. Thanks you again Choreus !!!

@Account_Capi, okay, let’s try this again. I’m pretty sure, the interaction I described in my previous post is the answer to your problem. I have recorded a short video for you.

I gave the body a background color, so it’s easier to see what’s happening. As soon as the interaction is deleted, the horizontal overflow is not happening anymore. Also, you can literally see the interaction causing the overflow when scrolling back up.

My suggestion is the following: Set the initial scale to something below 1. In the video I have chosen 0.5. The final scale should go back to 1. Anything above 1 (You currently have set 1.4) will create the horizontal overflow.

Let me know if this helps you out.

I can never thank you enough Choreus but as I said I have tried deleting the interactions you mentioned yet nothing changed. You can see it here, the tricky was the problem all the time, I still don’t how to fix this though.
By the way, I noticed that there are some differences so created a new link: Webflow - Capi Product

P/s: sorry I don’t know how to upload the video like you.
`

@Account_Capi, okay, I understand.

Please try setting width: auto; to your class sticky. This seems to solve it for me on the published site.

P/s: sorry I don’t know how to upload the video like you.

No problem at all. I use Loom for my recordings. You can create a free account and record up to 25 videos for free. You can easily link them here.

PS
In the future, I’d be very helpful If you would include the published link to your site as well. This makes troubleshooting easier. Thank you!

1 Like

Again, it’s worked just by some simple clicks.

In the future, I’d be very helpful If you would include the published link to your site as well. This makes troubleshooting easier. Thank you!

Did you mean my company site: capiproduct.com?

@Account_Capi

Again, it’s worked just by some simple clicks.

Awesome, that’s great to hear!

Did you mean my company site: capiproduct.com?

Yes, either your connected custom domain or the webflow[.]io domain. The one, that has the most recent state published.

1 Like