[Resolved] How to Remove CSS Styling on Search Results

Home Forums Support [Resolved] How to Remove CSS Styling on Search Results

Home Forums Support How to Remove CSS Styling on Search Results

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #587407
    Maria

    I’ve styled the Page Titles on Archives Page, but the styling is not showing properly in search results. I’d like to know how to get my CSS to work or remove the styling from the Search results page.
    This is my CSS which works on the Archives Page, but not on search results:
    h1.page-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 20px;
    text-transform: lowercase;
    letter-spacing: 2px;
    font-style: italic;
    }

    h1.page-title:before,
    h1.page-title:after {
    content: ”;
    align-self: center;
    border-top: 1px solid #999;
    }

    Type herbs in the search field and you’ll see the broken styling. How would I fix it or remove the styling from the search results?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #587478
    Leo
    Staff
    Customer Support

    Hi there,

    You can exclude the CSS on search result page like this:

    body:not(.search) h1.page-title {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: 20px;
        text-transform: lowercase;
        letter-spacing: 2px;
        font-style: italic;
    }
    
    body:not(.search) h1.page-title:before,
    body:not(.search) h1.page-title:after {
        content: ”;
        align-self: center;
        border-top: 1px solid #999;
    }
    #587528
    Maria

    Didn’t work. I even tried !important; but that didn’t help.

    #587550
    Tom
    Lead Developer
    Lead Developer

    Try using this as your CSS:

    body:not(.search-results) h1.page-title {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: 20px;
        text-transform: lowercase;
        letter-spacing: 2px;
        font-style: italic;
    }
    
    h1.page-title:before,
    h1.page-title:after {
        content:"";
        align-self: center;
        border-top: 1px solid #999;
    }
    
    .search-results h1.page-title:before,
    .search-results h1.page-title:after {
        display: none;
    }
    #588257
    Maria

    Thank you very much. That helped.

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