[Kipper is King]

Hello CP Wordpress experts,

I am working on a Wordpress site for a client using the "Stout" theme, a child theme of "Primer," apparently.

The site can be accessed at 93f.269.myftpupload.com

The theme is on GitHub at
https://github.com/godaddy/wp-stout-theme

Here's the theme page on GoDaddy:
https://ca.godaddy.com/wordpress-the...ok-2808304096#

I would like to narrow the menu bar vertically. There's a lot of wasted space with the text in big blocks. I tried using max-height to no avail.

I'm unsure how to do that. Any guidance would be appreciated, please.

Thank you to Photon and Getbak for your help a few days ago.

I now need some help with media queries...

Have a look at 93f.269.myftpupload.com

I have margins set with

.page-content {
margin-top: 3em;
margin-left: 4em;
margin-right: 4em;
}

and I have moved the sidebar down with

.widget-area {
margin-top: 12em
}

Which generally looks good on a desktop. However, I would like to eliminate the margin-top for the sidebar on tablets and phones, and I would like to greatly reduce the margins when viewed on a phone.

When I try inserting an example here

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

it works as expected. The background is blue on a phone.

However, I can't seem to figure out the media queries for the stuff I'd like to do.

May someone please help me? I'd be very grateful.

Edit: Problem solved by changing the em unit of measurement to a percentage, but I still would like to understand media queries to completely eliminate to the top margin on the sidebar when viewed on a phone.