Can't fix related post width

[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

[Leo]

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 🙂

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

[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

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[John]

It works in full width container.

By the way, How can I narrow container width?

[David]

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

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

[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?

[David]

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

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

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

[Author]

Posts