[Resolved] How to Remove CSS Styling on Search Results

[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?

[Leo]

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;
}

[Maria]

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

[Tom]

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;
}

[Maria]

Thank you very much. That helped.

[Author]

Posts