[Resolved] Different Style on Certain Search Results

[Chris]

Hello,

I’m having an issue with my styles being different on my blog page and on only some of my search results. To be clear, I like the look of the blog page currently.

Most of the search results look the same. But certain search terms result in either a masonry grid with no padding on the bottom (inside the container with the excerpt), or worse, certain terms result in a masonry grid with many styles changed (such as header and footer link, hover, etc.; font size change; no padding under excerpt).

I’ve tried messing with different setting and styles for a couple of days. I’m at a loss.

Thanks in advance.

[Elvin]

Hi Chris,

There’s a strange different between the embedded styles on each of the page’s head tag.

Price action search query has this:

<style type="text/css" id="tve_head_custom_css" class="tve_user_custom_style">a { color: #508888 !important;
      font-weight: 500 !important;
      transition: all 0.25s ease !important; }
a:hover { color: #222222 !important }
#move-to-top { visibility: hidden !important }</style>

Day trading search query has this:

<style type="text/css" class="tve_custom_style">@media (min-width: 300px){[data-css="tve-u-16494cc9f0f"] .sr-outline { fill: rgb(192, 192, 192); }[data-css="tve-u-16494cc9f0f"] .sr-background { fill: rgb(222, 222, 222); }[data-css="tve-u-16494cc9f0f"] { font-size: 25px; float: none; margin: 0px auto !important; }[data-css="tve-u-16494cc9f0f"] .sr-fill { fill: rgb(251, 176, 64); }[data-css="tve-u-178a3eba039"] { font-size: 20px !important; }[data-css="tve-u-178a3eba03c"] { font-size: 20px !important; }[data-css="tve-u-17a79fc0214"] { margin-left: auto; margin-right: auto; font-size: 47px !important; width: 47px !important; height: 47px !important; margin-bottom: 8px !important; }[data-css="tve-u-17a79ff2cd0"] { display: block; max-width: 90%; width: 90%; }[data-css="tve-u-17a79ff2cd0"] .tcb-button-link { border: 3px solid rgb(34, 34, 34); border-radius: 5px; overflow: hidden; background-color: transparent !important; background-image: linear-gradient(rgb(222, 222, 222), rgb(222, 222, 222)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; padding-top: 15px !important; padding-bottom: 15px !important; }#tve_editor [data-css="tve-u-17a7a01e887"] { color: rgb(34, 34, 34) !important; font-size: 22px !important; }#tve_editor [data-css="tve-u-17a7a06f894"] > :first-child { color: rgb(34, 34, 34); }[data-css="tve-u-17a7a089272"] { background-image: none !important; }#tve_editor [data-css="tve-u-17a79ff2cd0"]:hover .tcb-button-link span { color: rgb(80, 136, 136) !important; }#tve_editor [data-css="tve-u-17a79ff2cd0"]:hover .tcb-button-link { border: 3px solid rgb(80, 136, 136) !important; background-image: linear-gradient(rgb(234, 243, 243), rgb(234, 243, 243)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; background-color: transparent !important; }#tve_editor [data-css="tve-u-17a79ff2cd0"]:hover [data-css="tve-u-17a7a06f894"] > :first-child { color: rgb(80, 136, 136); }[data-css="tve-u-17a7a271d2f"] { display: block; max-width: 90%; width: 90%; }[data-css="tve-u-17a7a271d2f"] .tcb-button-link { border: 3px solid rgb(34, 34, 34); border-radius: 5px; overflow: hidden; background-color: transparent !important; background-image: linear-gradient(rgb(222, 222, 222), rgb(222, 222, 222)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; padding-top: 15px !important; padding-bottom: 15px !important; }#tve_editor [data-css="tve-u-17a7a271d2f"]:hover .tcb-button-link span { color: rgb(80, 136, 136) !important; }#tve_editor [data-css="tve-u-17a7a271d2f"]:hover .tcb-button-link { border: 3px solid rgb(80, 136, 136) !important; background-image: linear-gradient(rgb(234, 243, 243), rgb(234, 243, 243)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; background-color: rgb(234, 243, 243) !important; }#tve_editor [data-css="tve-u-17a7a271d2f"]:hover [data-css="tve-u-17a7a06f894"] > :first-child { color: rgb(80, 136, 136); }[data-css="tve-u-17a7a2e7b4f"] { display: block; max-width: 90%; width: 90%; }[data-css="tve-u-17a7a2e7b4f"] .tcb-button-link { border: 3px solid rgb(34, 34, 34); border-radius: 5px; overflow: hidden; background-color: transparent !important; background-image: linear-gradient(rgb(222, 222, 222), rgb(222, 222, 222)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; padding-top: 15px !important; padding-bottom: 15px !important; }#tve_editor [data-css="tve-u-17a7a2e7b4f"]:hover .tcb-button-link span { color: rgb(80, 136, 136) !important; }#tve_editor [data-css="tve-u-17a7a2e7b4f"]:hover .tcb-button-link { border: 3px solid rgb(80, 136, 136) !important; background-image: linear-gradient(rgb(234, 243, 243), rgb(234, 243, 243)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; background-color: rgb(234, 243, 243) !important; }#tve_editor [data-css="tve-u-17a7a2e7b4f"]:hover [data-css="tve-u-17a7a06f894"] > :first-child { color: rgb(80, 136, 136); }#tve_editor [data-css="tve-u-17a7a271d2f"] .tcb-button-link { font-size: 18px !important; }#tve_editor [data-css="tve-u-17a7a363f4e"] { color: rgb(34, 34, 34) !important; font-size: 22px !important; }#tve_editor [data-css="tve-u-17a7a37b2a0"] { color: rgb(34, 34, 34) !important; font-size: 22px !important; }[data-css="tve-u-17a7a4549ed"] { display: block; max-width: 90%; width: 90%; margin-top: 50px !important; }[data-css="tve-u-17a7a4549ed"] .tcb-button-link { border: 3px solid rgb(34, 34, 34); border-radius: 5px; overflow: hidden; background-color: transparent !important; background-image: linear-gradient(rgb(222, 222, 222), rgb(222, 222, 222)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; padding-top: 15px !important; padding-bottom: 15px !important; }#tve_editor [data-css="tve-u-17a7a4549ed"]:hover .tcb-button-link span { color: rgb(80, 136, 136) !important; }#tve_editor [data-css="tve-u-17a7a4549ed"]:hover .tcb-button-link { border: 3px solid rgb(80, 136, 136) !important; background-image: linear-gradient(rgb(234, 243, 243), rgb(234, 243, 243)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; background-color: rgb(234, 243, 243) !important; }#tve_editor [data-css="tve-u-17a7a4549ed"]:hover [data-css="tve-u-17a7a06f894"] > :first-child { color: rgb(80, 136, 136); }[data-css="tve-u-17a7a4a5269"] .t-caption { color: rgb(194, 40, 72) !important; }[data-css="tve-u-17a7a4a5269"] { margin-top: 20px !important; margin-bottom: 0px !important; }#tve_editor [data-css="tve-u-17a7a535cbd"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a53ad4b"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a53f0ac"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a542a50"] { color: rgb(194, 40, 72) !important; }[data-css="tve-u-17a7a594cd9"] .t-caption { color: rgb(80, 136, 136) !important; }[data-css="tve-u-17a7a594cd9"] { margin-top: 0px !important; margin-bottom: 0px !important; }#tve_editor [data-css="tve-u-17a7a5b36e5"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a5dbfa3"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a5ddb76"] { color: rgb(194, 40, 72) !important; }#tve_editor [data-css="tve-u-17a7a5dfdc0"] { color: rgb(194, 40, 72) !important; }[data-css="tve-u-17a7a6be7f8"] { overflow: hidden; padding: 20px !important; background-image: linear-gradient(rgb(245, 245, 245), rgb(245, 245, 245)) !important; background-size: auto !important; background-position: 50% 50% !important; background-attachment: scroll !important; background-repeat: no-repeat !important; border-radius: 0px !important; border: 1px solid rgb(165, 165, 165) !important; }}[data-tve-custom-colour="63568040"] { border: 1px solid rgb(165, 165, 165) !important; box-shadow: transparent 0px 0px 8px 4px inset, transparent 0px 0px 7px 3px !important; background-color: rgb(245, 245, 245) !important; }[data-tve-custom-colour="73642872"] { border: 1px solid rgb(206, 61, 86) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 8px 4px inset, rgba(0, 0, 0, 0) 0px 0px 7px 3px !important; background-color: rgb(252, 209, 209) !important; }[data-tve-custom-colour="71687508"] { border: 1px solid rgb(6, 183, 0) !important; box-shadow: transparent 0px 0px 8px 4px inset, transparent 0px 0px 7px 3px !important; background-color: rgb(193, 255, 207) !important; }[data-tve-custom-colour="58041123"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="5686221"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="38802510"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="7439457"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="17411451"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="68050084"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="38582530"] { border: 1px solid rgb(206, 61, 86) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 8px 4px inset, rgba(0, 0, 0, 0) 0px 0px 7px 3px !important; background-color: rgb(252, 209, 209) !important; }[data-tve-custom-colour="20811395"] { border: 1px solid rgb(6, 183, 0) !important; box-shadow: transparent 0px 0px 8px 4px inset, transparent 0px 0px 7px 3px !important; background-color: rgb(193, 255, 207) !important; }[data-tve-custom-colour="90058979"] { border: 1px solid rgb(165, 165, 165) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 8px 4px inset, rgba(0, 0, 0, 0) 0px 0px 7px 3px !important; background-color: rgb(245, 245, 245) !important; }[data-tve-custom-colour="99784240"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="49687159"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="6326415"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="69735896"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="75355231"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="67173879"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="38681372"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="95157874"] { border-color: rgb(165, 165, 165) !important; }[data-tve-custom-colour="34795453"] { background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="23607077"]:hover { box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="9961915"] { background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="86006887"]:hover { box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="86006887"] { box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="55190396"] { border: 1px solid rgb(165, 165, 165) !important; box-shadow: transparent 0px 0px 8px 4px inset, transparent 0px 0px 7px 3px !important; background-color: rgb(245, 245, 245) !important; }[data-tve-custom-colour="23462243"] { border: 1px solid rgb(165, 165, 165) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 8px 4px inset, rgba(0, 0, 0, 0) 0px 0px 7px 3px !important; background-color: rgb(245, 245, 245) !important; }[data-tve-custom-colour="23607077"] { background-color: rgb(0, 130, 190) !important; box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; }[data-tve-custom-colour="46195709"] { border: 1px solid rgb(6, 183, 0) !important; background-color: rgb(179, 252, 197) !important; box-shadow: transparent 0px 0px 8px 4px inset, transparent 0px 0px 7px 3px !important; }[data-tve-custom-colour="11235254"] { border: 1px solid rgb(206, 0, 33) !important; background-color: rgb(255, 204, 204) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 8px 4px inset, rgba(0, 0, 0, 0) 0px 0px 7px 3px !important; }[data-tve-custom-colour="41898083"] { background-color: rgb(0, 130, 190) !important; box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; }[data-tve-custom-colour="41898083"]:hover { box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="47628462"] { background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="92594001"] { background-color: rgb(0, 130, 190) !important; box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; }[data-tve-custom-colour="92594001"]:hover { box-shadow: rgba(0, 0, 0, 0) 0px 5px 0px !important; border-bottom-color: rgb(34, 34, 34) !important; background-color: rgb(0, 130, 190) !important; }[data-tve-custom-colour="43490315"] { background-color: rgb(0, 130, 190) !important; }</style>

While Risk to reward search query doesn’t have either of the two.

It affects the style of the post list. This isn’t something the theme generates.

Looking at the classes, it seemed familiar. Any chance you used Thrive Architect on this site at some point? It seems to be coming from that plugin by Thrive Themes.

[Chris]

Hello Elvin,

Thanks for your response. I am using Thrive Leads and Thrive Architect right now. I’m planning to replace all my Architect pages with pages I built with GenerateBlocks, but I’m planning to keep Thrive Leads.

Any idea what to do about this or why it’s injecting the extra styles on certain search queries?

Thanks.

[David]

Hi there,

quick question – do you intentionally want no footer meta on the search results page ?
As including the Block Element Post Meta template you’re using on the Search Results would probably fix most of the differences you’re seeing.

[Chris]

Hello,

I don’t understand your last reply. I haven’t removed any footer meta as far as I know. I do have a custom post meta hook set up for blog posts.

I still haven’t figured this out. I used a plugin to selectively disable plugins on certain pages, and that fixed many of the style issues on those pages, but the bottom padding issue still persists.

I had to remove that plugin, because it was causing a conflict with Thrive Leads. After removing it, the problem search pages are still only displaying the bottom padding issue.

I can give those results more bottom padding by adjusting the setting in the layout properties of GeneratePress, but then the blog posts and the search result pages (that are showing correctly) will have too much padding.

I noticed that the problem seems to happen when the first result is a page instead of a post.

[David]

With your post meta hook can you set the Display Rules to include: Search Results.
This should bring some consistency to your post archives. And should fix the spacing issue.

[Chris]

The issue is that something in the theme or GeneratePress is causing search results that start with a page to have less padding than results that start with a blog post.

Maybe that could be addressed in the future.

I did find a solution, though, thanks to your idea. I made a blank post meta for search pages only, just for spacing. Adding bottom padding made the results that looked fine before have too much spacing, but adding bottom margin worked.

I was today years old when I found out that vertical margins collapse, but that made the results look consistent.

[David]

I don’t know about the inconsistencies between search terms, as i did not see them when i checked the site.
What i did (do) see is the inside-article has no bottom padding ( set in Customizer > Layout > Container ).

And i noticed the difference between blog/archives and search results.
And that difference was the latter did not have the custom post meta hooked in.

But we’ll do some testing to see if there is something the theme is doing …

[Chris]

I set the bottom padding on the container to 1px, because if I set it to what I have the other set at, there is too much bottom padding. If I set it to 0px, the entry content container (in the blog posts) looks fine, but the padding at the bottom of the comments sections completely disappears. For some reason, adding 1px makes it look okay.

Then, my blog page meta block that I made has 20px bottom padding. That makes sense to me, because the entry content containers should now all have only 1px bottom padding.

However, on the search results pages, I wasn’t using any custom post meta. If I searched for “risk reward”, for instance, the first result is a blog post, and the bottom padding would be there.

If I searched for “price action”, the first result is a page, and there would be no bottom padding. The only difference being what kind of result was in the first slot.

You could even search for “risk reward”, which again results in a blog post as the first result. But click page “2”, and you’d get another result with a page being in the first slot, and bottom padding would be gone.

At first, I thought it had something to do with the pages being built with Thrive Architect, as I haven’t replaced all of those yet. But I also noticed it on pages that I’ve rebuilt with GB.

If you want, I can temporarily disable my custom search page post meta block so you can see what I’m talking about for yourself.

[David]

If you want to temporarily disable the post meta block – i can take another look.

[Chris]

Okay. I’ve disabled the search post meta block. I deleted some pages yesterday, so the example of searching for “risk reward” and then clicking page “2” will no longer work.

You can just search for “price action”, though, and then click page two. You’ll see difference in padding. Or just compare a search for “risk reward” and “price action”.

I’m not sure if I mentioned before, but the pages that are scattered throughout the search results don’t have different padding than the blog posts, so it doesn’t seem to be a page vs blog post thing. The padding changes for all results based on the type of the first result, i.e., a page in the first result = 1px bottom padding for all results / a blog post in the first result = 20px or so bottom padding for all results.

Sorry if I’m being redundant. I just want to make sure I’m being clear about what I’ve observed.

[David]

Aah ok – i see what it is now.
The theme has a content template for posts and one for pages.
The Posts template has the footer.entry-meta element ( even if that is empty ). Whereas the Page template does not.
And that element has the extra margin.

What i wasn’t clear on is that the Search Results uses whatever template the first post in the loop uses. Which is why you have page 1 using one template, and page 2 using another.

The solution you have by adding the empty block element is the simplest fix for this.

[Chris]

Okay. Thanks for taking a look. I’ll enable that block again.

[David]

Thanks for being patient with us and letting me take another look.
I am not sure how i never came across this before.
We have some plans for future template updates, such as removing the empty meta elements, which would keep things consistent. But personally i love the Block Element Content Templates and will be building most blogs with that in the future.

Appreciate your time!

[Author]

Posts