[Resolved] Centering posts on the search page or placing them in boxes

Home Forums Support Centering posts on the search page or placing them in boxes

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1170132
    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.

    #1170253
    David
    Staff
    Customer Support

    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.

    #1170547
    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?

    #1170597
    David
    Staff
    Customer Support

    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
    }
    #1170659
    Michał

    Works exactly as I wanted !! Thanks David!!

    #1171216
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.