Charge sitelibrary search CSS inheritance

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

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 there,

I'm not too sure what I'm looking at in those screenshots - can you explain a bit more?

A live link would be super helpful, even if it's a quick test server.

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.

Access to the site would definitely be helpful. You can send it through our contact form: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks!

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

Hi Tom,

Thanks for the suggestion via email

Removing the following styles results in losing the intended effect. It also degrades the appearance of the layout.

If you attempt these on a local installation, you'll see the difference.

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

Try adding this:

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

.search footer.entry-meta {
    display: none;
}

Any difference?

Thanks Tom.

Yes, it improves and is almost identical.

The exception is the difference between spacing between the bottom border and the text.

The is a slight gap in the search results when compared to the posts on the home page.

The CSS has been updated so you'll spot the dissimilarities.

Try this:

.search.one-container .inside-article {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 15px;
    padding-left: 0px;
}

Thanks Tom. That works flawlessly. It may be valuable to include these into the base library. I'll mark the topic as resolved.

I agree, thanks for letting us know :)