style.css

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: auto;
  scroll-snap-type: y mandatory;
  /* This enables vertical snapping */
}

body {
  scroll-padding-top: env(safe-area-inset-top);
  /* Adjusts for notches/status bars on mobile devices */
}

.full-height {
  min-height: 100vh;
  /* This makes the div take up the full viewport height */
  width: 100%;
  scroll-snap-align: start;
  /* This aligns the snap point at the top of the element */
}

/* Ensures smooth scrolling (optional) */
html {
  scroll-behavior: smooth;
}

@media screen and (min-width: 320px) {

  body,
  html {
    height: auto;
    min-height: 100%;
    scroll-snap-type: y mandatory;
    /* Ensures snapping on small devices */
  }

  .full-height {
    min-height: calc(100vh - env(safe-area-inset-top));
    /* Adjusts full height for small devices */
    scroll-snap-align: start;
    /* Ensures elements snap correctly */
  }
}

@media screen and (min-width: 768px) {

  body,
  html {
    height: auto;
    min-height: 100%;
    scroll-snap-type: y mandatory;
    /* Ensures snapping on tablets */
  }

  .full-height {
    min-height: calc(100vh - env(safe-area-inset-top));
    /* Adjusts full height for tablets */
    scroll-snap-align: start;
    /* Ensures elements snap correctly */
  }
}

@media screen and (min-width: 1024px) {

  body,
  html {
    height: auto;
    min-height: 100%;
    scroll-snap-type: y mandatory;
    /* Ensures snapping on desktops */
  }

  .full-height {
    min-height: calc(100vh - env(safe-area-inset-top));
    /* Adjusts full height for desktop to account for potential top bars */
    scroll-snap-align: start;
    /* Ensures elements snap correctly */
  }
}