# Fix Full-Height Sections on Mobile Browsers

> Makes Cover blocks and sections set to 100vh fit the visible screen on phones, where the browser's address bar otherwise hides the bottom of the section and its buttons.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: mobile, cover, hero, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-mobile-full-height-fix/

## Code

```css
@supports (height: 100svh) {
    .wp-block-cover[style*="min-height:100vh"],
    .wp-block-cover[style*="min-height: 100vh"],
    .wp-block-group[style*="min-height:100vh"],
    .wp-block-group[style*="min-height: 100vh"] {
        min-height: 100svh !important;
    }

    .admin-bar .wp-block-cover[style*="min-height:100vh"],
    .admin-bar .wp-block-cover[style*="min-height: 100vh"] {
        min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important;
    }
}
```

## Notes

Uses the small-viewport unit (svh), supported by all current browsers; older ones keep the original height.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fix Full-Height Sections on Mobile Browsers" 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/