changing header padding for smaller screen

Hey, it looks like you figured this out since posting. Can you confirm? Thanks.

Thannk you for following up. Unfortunately, I have not been able to figure this out. On a large screen, I can position my logo at any desired distance from the top (include 0px). But on a small screen, the distance is large, and no matter what I try, I can’t seem to adjust it.

Here’s what I’m currently trying in my child theme:

.site-header
@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;} }

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

.admin-bar .site-header-inside {
top: 0px; }
@media (max-width: 768px) {
.admin-bar .site-header-inside {
top: 0; } }
@media (min-width: 769px) and (max-width: 782px) {
.admin-bar .site-header-inside {
top: 0px; } }

It seems the .admin-bar .site-header padding controls the position of the logo on a large screen. But I can’t figure out what controls it on a small screen.

Any help would be greatly appreciated!
metabias.com

Here’s what I see on your site at small screen. The CSS I see for that is this. So you have a 70px padding at the top. I’m assuming you want that because the menu button is there, because if you set it to 0 it collides with the menu button.

In either case, it looks like you have an error in your CSS here.

Thanks for the help!

We do see the same thing. I’m trying to over-ride that 70px and change it to, say, 20px. I am new to WordPress/CSS, so I am doing this by trial-and-error. I thought the CSS where you say I have an error would do that, but it doesn’t. Could you please tell me what the error is?

Also, it seems the code to change the header padding on a large screen is:

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

But it isn’t working for me on a small screen.

Thanks again for your help.

This piece of CSS isn’t valid, and could be causing the problem:

.site-header
  @media (max-width: 768px) {
    .site-header {
      margin-left: 0;
      padding: 0px 5% 25px 5%;} }

Remove the top .site-header from it, and make it like this and try:

@media (max-width: 768px) {
    .site-header {
      margin-left: 0;
      padding: 0px 5% 25px 5%;
    }
}

Unfortunately, that didn’t work either. Here is everything I have for the header:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

The only other thing I can think of is that I modified the header PHP (in a child theme) to remove the sidebar. Do you think the problem could be there?

Can you post a screenshot of what you’re seeing?

I am working with the following CSS:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 0px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 0px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 0px; } }

If you go to the site now, you will see that there is no padding above the logo in full-screen mode. But when the screen size is reduced, it looks like the image you sent me previously, with a lot of padding.

On an iPhone-sized screen, this is what I see now.

I don’t quite understand why you’re trying to make less padding above the logo on small screens? As you can see, the menu button and the logo are clashing. And in your screenshot the logo is already under the admin bar (which I can’t really test since I can’t login to your site).

Are we talking about the same thing?

That is very strange! Until this morning, my iPhone always displayed a lot of padding above the logo (I have been working on this for about a week). I think it’s working now. One final question. I am working with the following CSS, but I don’t fully understand what each section does:

@media (max-width: 768px) {
.site-header {
margin-left: 0;
padding: 40px 5% 25px 5%;
}
}

.admin-bar .site-header {
padding-top: 40px; }
@media (max-width: 768px) {
.admin-bar .site-header {
padding-top: 20px; } }

What is the difference between “.site-header” and “.admin-bar .site-header”? Is there some redundancy/unnecessary code here?

Thank you so much for your help and patience!

The .admin-bar version is what is used when you’re logged in and the black admin bar that WordPress automatically adds is showing. You can use it to push the rest of the page down so things like the logo don’t get hidden underneath.