[Resolved] Charge sitelibrary search CSS inheritance

Hi Leo,

As the site isn’t accessible to the public yet, you can access the screenshots at https://imgur.com/a/YqpSUYC

The CSS code is as follows;

/* GeneratePress Site CSS */ html {
	background: #001819;
}

body {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

/* Navigation styles */
@media (min-width:769px) {
	.main-navigation .main-nav ul li.nav-button a {
		border-width: 3px;
		border-style: solid;
		border-color: inherit;
		border-radius: 5px;
		line-height: 3em;
	}
}

.page-header {
	padding-bottom: 40px;
}

/* Home hero styles */
.lightning-bolt svg {
	color: #f4bb29;
	max-width: 75px;
	margin-bottom: 20px;
}

.page-hero h2 {
	margin-bottom: 35px;
	font-size: 35px;
	font-weight: 700;
}

@media (max-width: 768px) {
	.page-hero h2 {
		font-size: 25px;
	}
}

.page-hero .button, 
.slideout-navigation .button {
    padding-left: 50px;
		padding-right: 50px;
    border-radius: 3px;
    font-weight: 700;
    text-align: center;
}

/* Pages and posts hero styles */
.page .page-hero h1, .single .page-hero h1 {
    display: inline-flex;
    background: rgba(0,0,0,0.1);
    border-bottom: 5px solid #f6c956;
    padding: 20px;
    margin-bottom: 0;
}

/* Posts grid styles */
.generate-columns .inside-article {
    background-color: #f5f5f5;
		border-bottom: solid #f6c956;
}
.generate-columns .inside-article:hover {
}

.post-image {
    line-height: 0;
}

h2.entry-title {
    padding: 20px 40px;
    text-align: center;
}

.blog.post-image-above-header .inside-article div.post-image, .blog .entry-summary, .blog footer.entry-meta,
.archive.post-image-above-header .inside-article div.post-image, .archive .entry-summary, .archive footer.entry-meta{
    margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 10px;
}

.blog.one-container .inside-article, .archive.one-container .inside-article {
    /* padding: 0; */
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 15px;
		padding-left: 0px;
}

.entry-summary {
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 10px;
}

/* Single posts narrow content container */
.one-container .entry-content, .comments-area, footer.entry-meta {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
} /* End GeneratePress Site CSS */

Hi Tom,

You’ll notice from the screenshots that the border (bottom yellow) surrounding each box differs for instance. It appears in some and not others.

The second example is the content positioning (within the box) varies between results that have a single output versus multiple. For instance, the text is left-aligned with a single result and center aligned when there are multiple results.

The third scenario is that there is no spacing between the boxes in the search result e.g. top and bottom.

If you import the shared CSS code and search for content, it’ll replicate the issue.

Assuming you are unable to mimic the issue and since the site is inaccessible (requires a password), please let me know how best to share the credentials securely.

Thanks Tom. The details have been submitted via the contact page.