Scroll Horizontally not working on mobile

[Alan Senderovich]

Hello everyone, I have this code that works very well in CodePen both on desktop and mobile (on mobile I checked it with my cell phone and it works great).

The problem is that when I want to implement it in the browser (both locally and in production), the animation stops taking effect on mobile.

I have already tried many options but none of them work.

I don't know why in CodePen it works fine, but in the browser it doesn't anymore.

Anyone who can help me will be very grateful!

Thanks for your time!!

See the Pen qBLQOKG by Alan-Senderovich-the-vuer (@Alan-Senderovich-the-vuer) on CodePen

[Rodrigo]

Hi Alan,

 

Sorry but if we can't see the actual issue there is not much we can do 🤷‍♂️

 

The only thing I can think of, if your CSS is the same on your development environment, is this:

section {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 100vw;
  height: 100vh;
  font-size: 50px;
  font-weight: bold;
  background-color: red;
}

Basically you are setting styles for all <section> tags. Global and general styles like that can always come back to haunt you, especially since there are some browser extensions that could add a section tag to the HTML and create some issues, so the only advice I can give you is to give a more specific style selector to those elements.

 

Hopefully this helps.

Happy Tweening!

[Alan Senderovich]

Thanks a lot Rodrigo!!!