Reduce empty space

  • Resolved Gunivortus

    (@gunivortus)


    3 years, 11 months ago

    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 to see the link]

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

  • 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

    (@gunivortus)

    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.