Wordpress/CSS Help: Update- please help with media queries.

[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.

[photon]

This is more of a CSS question than a Wordpress specific question, though someone with CSS experience and Wordpress experience both might have a better answer.

Lots of white space is currently the popular designs rather than trying to get more info in a small space.

Incidentally the site doesn't look right to me, it's like a bunch of the theme isn't working.

[getbak]

It looks like the height is being set with the padding on: .main-navigation a

Right now, the padding is set to 2em. If you reduce that, it should reduce the overall height of the text box.

[Kipper is King]

Originally Posted by photon

This is more of a CSS question than a Wordpress specific question, though someone with CSS experience and Wordpress experience both might have a better answer.

Lots of white space is currently the popular designs rather than trying to get more info in a small space.

Incidentally the site doesn't look right to me, it's like a bunch of the theme isn't working.

You are right. I have hidden some features via CSS to get more content on the page when first viewed.

Originally Posted by getbak

It looks like the height is being set with the padding on: .main-navigation a

Right now, the padding is set to 2em. If you reduce that, it should reduce the overall height of the text box.

Thanks. I'll try that shortly.

[Kipper is King]

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.

[BananaPancakes]

I missed what your site used to look like, so I'm not sure what problem you were having since you said it has been fixed but media queries are pretty simple.

For example, let's say your breakpoints for phone, tablet, desktop are 640px, 1024px, 1200px. You can put specific CSS for each device using media queries.

For example, want CSS to apply for phone devices only (640px or less in width) you would do something like this:

@media screen and (max-width: 640px) { /* your css here */ }

If you want CSS to apply for say, tablets screens and bigger (1024px or more in width) you would do something like this:

@media screen and (min-width: 1024px) { /* your css here */ }

Say you want tablets only, you can use both min-width and max-width like this:

@media screen and (min-width: 640px) and (max-width: 1200px) { /* you css here */ }