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

Home Forums Support Ugly „page-header” class on Search Results Page

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #889687
    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!

    #889905
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    For example:

    .page-header {
        background: #fff;
    }
    #890447
    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

    #890501
    David
    Staff
    Customer Support

    Hi there,

    where did you add the CSS?

    #890513
    Vlad

    In the child theme’s styles file.

    #890714
    David
    Staff
    Customer Support

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

    #890779
    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

    #890788
    David
    Staff
    Customer Support

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

    #890795
    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.

    #890805
    David
    Staff
    Customer Support

    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.

    #890809
    Vlad

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

    #890813
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.