Small Wordpress CSS tweak
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

See site:

http://dancalamai.com/blog

On a standard laptop, notice there are about 140 pixels between the bottom of the menu (About, Blog, Subscribe) and the horizontal black line. That pixel height varies depending on your device. However, I would like to reduce the height of that blank space by 50%, so it is approx 70 pixels on a standard laptop.

Using Wordpress standard "2019" theme

awarded to BrianSantoso
Tags
css
wordpress

Crowdsource coding tasks.

3 Solutions


Simply add this to your additional CSS:

.site-header {
    padding-bottom: 10 px !important; /* change with any value you want */
}

Add this to your additional CSS:

.site-header {
margin: 0 !important;
padding: 1.5rem 0 !important;
}

can you explain what this is doing? It looks like it also reduces the vertical space from top of page to menu
calamai 6 months ago
Winning solution

You want to edit the padding under .site-header class in your CSS file.

Currently the CSS reads:

.site-header {
   margin: 0;
   padding: 2rem 0;
}

From your question, it seems you want to specifically reduce the bottom padding by 50%. So how do we do that? First of all, we can reformat the CSS to make it a little easier to understand:

.site-header {
   margin: 0;
   padding-top: 2rem;
   padding-bottom: 2rem;
   padding-left: 0;
   padding-right: 0;
}

We haven't changed anything yet. What we need to do is reduce the padding-bottom to something like 3vh, which will will reduce the space underneath menu (you'll need to play around with that value, you might find that something like 0vh looks nicest).

.site-header {
   margin: 0;
   padding-top: 2rem;
   padding-bottom: 5vh;
   padding-left: 0;
   padding-right: 0;
}

So what is a "vh"? It's just a unit that means "1% of the viewport's height". This means it will dynamically scale the height relative to the user's screen height, so that it appears with the correct proportions, regardless of the user's screen size.

If you want to learn more about relative units, here's a helpful page that describes that various CSS units; The section under "Relative Lengths" is what you're looking for.
https://www.w3schools.com/cssref/css_units.asp

Thanks Brian, extremely helpful! Have a great week!
calamai 6 months ago
View Timeline