Can't fix related post width

Hi there,

Can you try David's HTML structure here?
https://generatepress.com/forums/topic/make-a-div-full-width/#post-1066586

Let me know :)

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

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.

It works in full width container.

By the way, How can I narrow container width?

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

Oh!My bad

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

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

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

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