[Support request] Ugly „page-header” class on Search Results Page

[Vlad]

Hi there,
I need to style the title of the Search results page (e.g. „Search results for: video”, like in the image below) with some padding so that it looks more consistent/aligned with the rest of the page and less glued to the left margin of the screen.

View post on imgur.com

Any idea on how I might achieve that? What CSS classes should I modify?

Thank you!

[Tom]

Hi there,

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

For example:

.page-header {
    background: #fff;
}

[Vlad]

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

[David]

Hi there,

where did you add the CSS?

[Vlad]

In the child theme’s styles file.

[David]

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

[Vlad]

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

[David]

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

[Vlad]

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.

[David]

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.

[Vlad]

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

[David]

Awesome – glad to be of help.

[Author]

Posts