[Support request] Can't fix related post width

Home Forums Support Can't fix related post width

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1087663
    John

    Hello

    I am using before_commenting_conatiner hook to show related posts. It works well.

    I applied some CSS also to show the related post area full width. But it not works.

    There are blank space in right side and hide some portion in left side.

    How can I fix it?

    Thanks

    #1088063
    Leo
    Staff
    Customer Support
    #1088088
    John

    Here is my HTML structure

    
    <div class="wpsp-related-posts  grid-container">
    	<h2>Related Reviews</h2>
    <?php
    if ( is_single() ) {
        $cats =  get_the_category();
        $cat = $cats[0];
    } else {
        $cat = get_category( get_query_var( 'cat' ) );
    }
    
    $cat_slug = $cat->slug;
    $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
    wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
    ?>
    </div>
    

    Here is CSS

    
    .wpsp-related-posts {
        background-color: #f2f3f4;
        padding: 64px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .wpsp-related-posts h2 {
        margin-bottom: 64px;
    }
    body {
        overflow-x: hidden;
    }
    
    .wpsp-related-posts.grid-container {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
    .wpsp-related-posts h2, .wpsp-related-posts h4 {
        text-align: center;
    }
    

    CSS code provided by Tom

    #1088762
    Tom
    Lead Developer
    Lead Developer

    Strange – that CSS should work. What happens if you disable the sidebar (just to test)?

    Ideally, it should be possible to unhook the comments area and re-add it after the container. This is something I need to address inside the theme.

    #1088825
    John

    It works in full width container.

    By the way, How can I narrow container width?

    #1089505
    David
    Staff
    Customer Support

    Hi there,

    it would require an inner container to limit the inner width – so the markup will look like this:

    <div class="wpsp-related-posts  grid-container">
        <div class="wpsp-related-inner">
    	    <h2>Related Reviews</h2>
            <?php
            if ( is_single() ) {
                $cats =  get_the_category();
                $cat = $cats[0];
            } else {
                $cat = get_category( get_query_var( 'cat' ) );
            }
            $cat_slug = $cat->slug;
            $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
            wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
            ?>
        </div>
    </div>

    Then add this CSS:

    .wpsp-related-inner {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    #1089920
    John

    Oh!My bad

    I tried to mean body container. Especially single post content.

    How can I narrow post content(single post) like wordsmith, Volume?

    #1090000
    David
    Staff
    Customer Support

    You can use the Layout element to selectively adjust content width:

    https://docs.generatepress.com/article/layout-element-overview/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.