100% high section-1 + center content vertically + comment form in section-2?

Hi there,

1. You can add a class to the section and apply 100vh:

.your-class {
	height: 100vh;
}

2. Not easily - you would either need to use Flexbox CSS or javascript. Maybe you should use the Page Header for section-1? It has the full height and vertical center built in.

3. Not possible I don't think unless you can find a plugin which adds the comments inside a shortcode.

1. and 2.
I have tried something and it works. Is this a good solution?

#generate-section-1 {
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

3.
I found a shortcode for comment-form. But shortcode for comment-content I did not find. How do I create it?

add_shortcode( 'sk_comment_form', 'sk_comment_form_shortcode' );
function sk_comment_form_shortcode() {
    ob_start();
    comment_form();
    $cform = ob_get_contents();
    ob_end_clean();
    return $cform;
 }

1. Absolutely! Flexbox is cool, but won't work in old versions of IE.

3. I'm not sure it's possible, the actual comments use an entire template file (comments.php) as opposed to just a simple function like comment_form().

Something like this might work, but I'm not sure: http://stackoverflow.com/questions/28593898/how-to-display-the-comments-template-with-a-shortcode-in-wordpress

1. OK, great, thank you.

3. The shortcode works great, but the comments are not displayed. Do I have a bug in the code?

I would have to see the code, but this one looks most promising: http://stackoverflow.com/a/28594128/2391422

It would require you to include the ID of the post you're trying to fetch comments from.

Thanks Tom. I found there the perfect shortcode. With this everything works great.

 /**
  * Shortcode Comment Form & Comment List - [wpse_comments_template]
  */

add_shortcode( 'wpse_comments_template', function( $atts = array(), $content = '' )
{
    if( is_singular() && post_type_supports( get_post_type(), 'comments' ) )
    {
        ob_start();
        comments_template();
        print(  '<style>#comments-title { display: none; }</style>' );
        return ob_get_clean();
    }
    return '';
}, 10, 2 ); 

Awesome :)

Your solution with page header is great. But I do not understand a thing.

When I create a page with "Sections" and I add content to the "Page Header", with the settings "Fullscreen" + "Vertical center content", everything works great.

But when I create a post with the same settings, I must additionally select "Merge with site header" otherwise nothing is displayed.

Is there a bug in GP Premium, or am I doing something wrong?

By default, the single post page header displays within the content area (next to the sidebar). This makes it so many of the full screen etc.. options don't apply.

You can adjust this in "Customize > Layout > Page Header > Single Post Page Header".

Hope this helps :)

Ah, now I understand. Thank you very much :)

You're welcome :)