# Full-Screen Snap Scrolling Between Sections

> Makes the page snap from one full-screen section to the next while scrolling, for presentation-style landing pages built from Cover or Group blocks with the class "wpide-snap".

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: scroll-snap, landing-pages, sections, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-scroll-snap-sections/

## Code

```css
@media (prefers-reduced-motion: no-preference) and (min-height: 500px) {
    html:has(.wpide-snap) {
        scroll-snap-type: y proximity;
    }

    .wpide-snap {
        scroll-snap-align: start;
        min-height: 100svh;
    }
}
```

## Notes

Add wpide-snap to each full-height section. Snapping only turns on for pages that contain such sections, and not for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Full-Screen Snap Scrolling Between Sections" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/