Setting `scroll-snap-type` and `scroll-snap-align` to `none` on a mobile sized breakpoint doesn't work?

Question

I can't seem to set scroll-snap-type to none on a mobile breakpoint. Ideally, I'd like to remove css scroll snap on mobile devices because it has been confusing for many users when scrolling through my application on mobile devices and can be wonky sometimes. CSS scroll snap works great, but I can't seem to set it to none for mobile devices.

Any ideas or suggestions?

Here is my code for CSS Scroll Snap:

section {
  display: flex;
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.container {
    width: 100vw;
    height: 100vh;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Mobile breakpoint */
@media (max-width: 375px) {
  .description {
    width: 90%;
  }

  /* Parent set to none */
  .container {
    scroll-snap-type: none;
  }
  
  /* Child set to none */
  section {
    scroll-snap-align: none;
  }
}

Any help is very much appreciated, thank you in advance!

Answer 1

Late to the game here, but reasonable juggling between mobile-first and desktop-first is often the best solution. Why not make sure even the latest mobiles don't snap and apply the snapping from let's say 600px and up?

So, do this instead. Then you don't have to default/null already given values.

/* Tablet and Desktop and up breakpoint */
@media screen and (min-width: 780px) {
    scroll-snap-type: y mandatory;
}