Title: Reduce empty space
Last modified: December 24, 2020

---

# Reduce empty space

 *  Resolved [Gunivortus](https://wordpress.org/support/users/gunivortus/)
 * (@gunivortus)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-empty-space/)
 * At the specified site, there’s above and below the menu rather much empty space.
   
   Is there perhaps a piece of css with which I can reduce that?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freduce-empty-space%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Oliver Campion](https://wordpress.org/support/users/domainsupport/)
 * (@domainsupport)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-empty-space/#post-13834002)
 * There’s space above and below the header which initially is managed by the theme’s
   style.css …
 *     ```
       .site-header {
       padding-top: calc(0.75 * var(--global--spacing-vertical));
       padding-bottom: calc(2 * var(--global--spacing-vertical));
       }
       @media only screen and (min-width: 482px) {
       .site-header {
       padding-top: calc(var(--global--spacing-vertical)) / 0.75);
       padding-bottom: calc(3 * var(--global--spacing-vertical));
       }
       }
       @media only screen and (min-width: 822px) {
       .site-header {
       padding-top: calc(2.4 * var(--global--spacing-vertical));
       }
       }
       ```
   
 * … whereby `var(--global--spacing-vertical)` is set to 30px.
 * Then you have this in your “Customizer – Additional CSS” …
 *     ```
       .site-header {
       padding-top: 22.5px;
       }
       @media only screen and (min-width: 822px) {
       .site-header {
       padding-top: 72px;
       }
       }
       ```
   
 * … which is overriding the theme CSS.
 * The small space above the menu is being caused by the margin below your logo …
 *     ```
       .site-logo {
       margin: calc(var(--global--spacing-vertical)) / 2) 0;
       }
       ```
   
 * If you wanted to change the space (padding) below the menu (header), you could
   use this …
 *     ```
       .site-header {
       padding-bottom: 20px;
       }
       @media only screen and (min-width: 482px) {
       .site-header {
       padding-bottom: 30px;
       }
       }
       ```
   
 * … which would make it 20px for smaller screens and 30px for larger screens for
   example.
 * Hope that helps?
 * Oliver
 *  Thread Starter [Gunivortus](https://wordpress.org/support/users/gunivortus/)
 * (@gunivortus)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-empty-space/#post-13834119)
 * Thanks a lot Oliver, that did help!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Reduce empty space’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyone/2.8/screenshot.
   png)
 * Twenty Twenty-One
 * [Support Threads](https://wordpress.org/support/theme/twentytwentyone/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentyone/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyone/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentyone/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [empty space](https://wordpress.org/support/topic-tag/empty-space/)

 * 2 replies
 * 2 participants
 * Last reply from: [Gunivortus](https://wordpress.org/support/users/gunivortus/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-empty-space/#post-13834119)
 * Status: resolved