Search page issue

I was already provided with the code to customize this before from the forum and the code is still there but for some reason, it is now showing up like how it was customized.

This is how it looks when you type a keyword into search https://www.blogbymichelle.com/?s=money (images too big, it shows my tags etc)

But it is customized to look like this https://www.blogbymichelle.com/category/make-money/ (I did not remove any of the custom css codes I got from the forum) so why is it now showing up as it now (which is how it looked when I just purchase xtheme)

This is the custom code I got from Xtheme forum which is still on my blog and I did not change

.x-brand img {
width: auto !important;
}

.x-navbar,
.entry-wrap,
.simple-social-icons ul,
.x-colophon.bottom{
border:none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
.x-colophon.top, .x-colophon.bottom {
border-top: 1px solid rgba(0,0,0,0.085) !important;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}
.blog .x-header-landmark {
display: none;
}

.blog .x-main article:first-child .entry-wrap {
padding-top: 0;
}
.x-container.offset {
margin-top: 6em;
}
.blog .entry-title {
font-size: 160%;
}
.single-post h1.entry-title{
font-size: 150%; /* Adjust this accordingly*/
}

#respond h3,
.more-link {
font-size: 20px !important;
}
.entry-meta {
margin: 15px 0 !important;
}

.p-meta,
.logged-in-as,
.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-rating label, .comment-form-comment label {
font-size: 15px;
}

.blog .entry-footer {
display: none;
}

.single-post .entry-footer {
display:none;
}

@media (min-width: 768px) {
.blog .has-post-thumbnail {
overflow: hidden;
background-color: #fff;
padding: 60px;
}
.blog .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}

.blog .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 0 0 0 40px;
}
}

.single-post .entry-featured {
display: none;
}

.archive.category .entry-footer {
display: none;
}
.blog .entry-title,
.archive .entry-title {
font-size: 160%;
}
@media screen and (min-width: 768px) {
.blog .has-post-thumbnail .entry-featured,
.archive .has-post-thumbnail .entry-featured {
float: left;
width: 40%;
box-shadow: none;
border: none;
}
.blog .has-post-thumbnail .entry-wrap,
.archive .has-post-thumbnail .entry-wrap {
float: left;
width: 60%;
padding: 0 0 0 40px;
}
}

.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
background-color: #FFFF99;
border-radius: 5px;
}
.img-max-width {
max-width: 50%;
}

.x-comments-area {
margin-top: 0;
}
.single-post .entry-wrap {
padding-bottom: 0;
}
.x-comments-area {
margin-top: 0;
}
#optinforms-form3-container,
#optinforms-form3-container form {
margin-bottom: 0;
}

.hentry {
margin-top: 0em !important;
margin-bottom: 60px;
padding-top: 0px !important;
padding-bottom: 10px !important;
}
.entry-wrap {
padding-top: 0px !important;
}

body.single-post h2 {
font-size: 130% !important;
}

h2, .h2 {
line-height: 1.4;
}

.hentry {
overflow:hidden;
clear: both !important;
}

.x-navbar {
padding-bottom: 20px;
border-bottom: 1px solid rgba(0,0,0,0.085) !important;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.8) !important;
}

body {
line-height: 40px;
}

.archive h1.h-landmark {
font-size: 200%;
}

.entry-content h2 a {
color: #ff1493
}

.entry-content h2:hover a {
color: #00bfff
}

body.single-post .entry-content h2{
margin-bottom:0.8em /* just an example*/

Hello Shamalee,

Thanks for writing in! Regretfully the custom CSS is only for the blog index and the archive pages. The search results pages were not included. I am talking about this particular custom CSS block:

@media screen and (min-width: 768px) {
	.blog .has-post-thumbnail .entry-featured,
	.archive .has-post-thumbnail .entry-featured {
		float: left;
		width: 40%;
		box-shadow: none;
		border: none;
	}
	
	.blog .has-post-thumbnail .entry-wrap,
	.archive .has-post-thumbnail .entry-wrap {
		float: left;
		width: 60%;
		padding: 0 0 0 40px;
	}
}

You should update that code and include .search. Therefore, the updated code will have to be:

@media screen and (min-width: 768px) {
	.blog .has-post-thumbnail .entry-featured,
	.archive .has-post-thumbnail .entry-featured,
	.search .has-post-thumbnail .entry-featured {
		float: left;
		width: 40%;
		box-shadow: none;
		border: none;
	}

	.blog .has-post-thumbnail .entry-wrap,
	.archive .has-post-thumbnail .entry-wrap,
	.search .has-post-thumbnail .entry-wrap {
		float: left;
		width: 60%;
		padding: 0 0 0 40px;
	}
}

And this custom CSS:

.archive.category .entry-footer {
    display: none;
}

Should be updated as well to remove the tags in the search results page.

.archive.category .entry-footer,
.search .entry-footer {
    display: none;
}

And it should look like this:

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.