Centering posts on the search page or placing them in boxes

[Michał]

Hello,
I would like to make an effect on my website so that the results are displayed centered vertically and horizontally or in some boxes. Could this be achieved with CSS or functions?

Now I have column but they don’t want to center horizontally.

[David]

Hi there,

can you try disabling the Masonry option in Customizer > Layout > Blog – then i can take a look if the elements still need aligning.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michał]

Ok I did it. But not using layout. I used the function:

function lh_custom_search_results_page_settings( $options ) {
if ( is_search() ) {
$options[‘read_more_button’] = true;
$options[‘date’] = false;
$options[‘categories’] = false;
$options[‘tags’] = false;
$options[‘comments’] = false;
$options[‘infinite_scroll’] = true;
$options[‘infinite_scroll_button’] = true;
$options[‘masonry_load_more’] = ‘Więcej wyników szukania’;
$options[‘post_image’] = true;
$options[‘post_image_position’] = ‘post-image-above-header’;
$options[‘post_image_alignment’] = ‘post-image-aligned-justify’;
$options[‘column_layout’] = true;
$options[‘featured_column’] = false;
$options[‘masonry’] = false;
}

return $options;
}

Because I wanted to have separate settings for the search page and separate for the blog.

I noticed that all photos must have the same dimension but with many items the proportion will be different. What’s more, the length of the text also affects the display of search results, which looks very bad. Some are above others below.
I am wondering if it is possible to close these items in boxes with a visible borderline and at the same time that this did not affect the blog’s settings?

[David]

Try this CSS:

.search.one-container:not(.page) .inside-article {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.search.one-container:not(.page) .inside-article .post-image {
    text-align: center;
}

.search.one-container:not(.page) .inside-article .post-image img {
    max-height: 200px;
    width: auto;
}

.search.one-container:not(.page) .entry-summary, 
.search.one-container:not(.page) .entry-title {
    margin-bottom: 1.5em;
}

.search.one-container:not(.page) .entry-summary {
    margin-top: auto;
}

.search.one-container:not(.page) .entry-summary ul {
    list-style: none;
    margin-left: 0
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michał]

Works exactly as I wanted !! Thanks David!!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts