Ugly „page-header” class on Search Results Page

Hi there,

You're looking for the .page-header selector.

For example:

.page-header {
    background: #fff;
}

Hi Tom,
That doesn't change it. I actually need to add a left padding of 30px (on mobile) and 40px (on desktop) for the H1 in the .page-header class.
So far, I've tried (with and without the !important part):

.page-header .page-title {
    padding-left: 40px !important;
}

and

.page-header h1 {
    padding-left: 40px !important;
}

...and nothing. Any ideas why?
Please ignore the absence of @media query, I know about it.
Thanks

Hi there,

where did you add the CSS?

In the child theme's styles file.

I am not seeing the CSS in the child theme style sheet. can you double check it was saved?

Hello David,
Sorry about that, I was working locally. Meanwhile I got it fixed. I will paste the code here in case others need to tweak the Search Results Page Title.

/* Title of Search Results Page */
.page-header .page-title {
    padding-left: 40px;
    font-size: 28px;
}
@media (max-width: 768px){
    .page-header .page-title {
        padding-left: 30px;
        font-size: 25px;
    } 
}

However, I have another CSS problem I really can't solve. It's about the nav menu on mobile (image below)

Logo sticks on left side, as it should do, but for a brief time, just after loading the page, the search button and the menu button float to the left, below the logo. If I wait for a second or start scrolling down the page, menu goes back to normal.

That only happens on a real device (I've tested it on two different phones I had at hand) and I could not replicate the behavior on a browser simulation. The website in question is the one mentioned in the image address bar (that is actually a print screen of one of the phones).

Any ideas how I could fix that? Please let me know if you need the login credentials.
Thanks, Vlad

It looks like the issue is related to the lazy loader - can you disable that to see if that is the case?

Yes, that did it! I have deactivated the lazy load and that solved it.

I am using Autoptimize, a plugin I see you people recommend https://generatepress.com/fastest-wordpress-theme/ (although not with the lazy load setting activated). Does this mean I will not be able to lazy load the images? I am trying to speed things up a bit, since the website is quite slow at the moment.

In the Automptimize > Image settings they provide a field to exclude classes try adding:

header-image

If the class doesn't work you can add the image filename.

It seems to ignore the class, but it works with the filename. Thank you David!
Great theme, great support team!

Awesome - glad to be of help.