Pages Layout Alignment Different from Posts

Hi @yingscarlett

Unfortunately, I can’t provide publicly accessible active links at the moment.

However, these are the URLs I’m comparing:

Post:
https://yourdomain.com/windows-11-aio/

Page:
https://yourdomain.com/donasi

The page layout/alignment looks different from the post layout.

• This reply was modified 6 hours, 46 minutes ago by r3ndy.

Hi @yingscarlett , thanks for looking into this.

I’m not intentionally adding anything related to comment-form-comment. The only customizations I made are below (layout + comment form styling and repositioning):

PHP (customizations):

<?php
add_action( 'wp', function() {
    remove_action( 'generate_after_do_template_part', 'generate_do_comments_template', 15 );
    add_action( 'generate_before_comments_container', 'generate_do_comments_template' );
});

add_action( 'wp_head', function() {
    ?>
    <style>
        #comments {
            display: flex !important;
            flex-direction: column !important;
        }
        #respond {
            order: -1 !important;
            margin-bottom: 30px !important;
            border-bottom: 2px solid #eeeeee;
            padding-bottom: 20px !important;
        }
        .comments-title, .comment-list, .comment-navigation {
            order: 1 !important;
        }

        .comment-form {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .comment-form-comment, .custom-comment-notes, .form-submit, .comment-form-cookies-consent {
            grid-column: span 2;
        }
        @media (max-width: 768px) {
            .comment-form { grid-template-columns: 1fr; }
        }
    </style>
    <?php
});

add_filter( 'comment_form_defaults', function( $defaults ) {
    $defaults['comment_notes_before'] = '
    <div class="custom-comment-notes" style="margin-bottom:15px; font-size:14px; color:#aaa;">
        <p>Gunakan email valid agar kamu mendapat notifikasi balasan.</p>
        <p>Kirim <a href="https://prnt.sc/" target="_blank" rel="nofollow noopener noreferrer">screenshot</a> komentar kamu di sini.</p>
    </div>';
    return $defaults;
});

add_filter( 'comment_form_fields', function( $fields ) {
    if ( isset($fields['comment']) ) {
        $comment_field = $fields['comment'];
        unset($fields['comment']);
        $fields['comment'] = $comment_field;
    }
    return $fields;
});
?>

CSS:

#comments {
    display: flex !important;
    flex-direction: column !important;
}

#respond {
    order: -1 !important;
    margin-bottom: 40px !important;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 20px !important;
}

.comments-title, .comment-list {
    order: 1 !important;
}

.custom-comment-notes {
    margin-bottom: 15px;
    line-height: 1.4;
    padding-bottom: 10px;
}

.custom-comment-notes p {
    margin: 0 !important;
    font-size: 14px;
    color: #666;
}

.custom-comment-notes a {
    color: #a48eff;
    text-decoration: underline;
}

.custom-comment-notes a:hover {
    color: #ff0000;
}

.comment-navigation:first-of-type {
    display: none;
}

Hi @yingscarlett

The code is working now. I’d also like to add a message under “Leave a Comment” on Pages so it matches the Posts as well.

“Use a valid email so you’ll receive reply notifications.
Upload your screenshot here, then paste the link in the comment field.”

Hi @yingscarlett

I’ve added your code, but it doesn’t seem to work on my side. The message under “Leave a Comment” is not appearing on Pages.

I’m currently using this filter as well:

add_filter( 'comment_form_defaults', function( $defaults ) {
    $defaults['comment_notes_before'] = '
    <div class="custom-comment-notes" style="margin-bottom:15px; font-size:14px; color:#aaa;">
        <p>Gunakan email valid agar kamu mendapat notifikasi balasan.</p>
        <p>Kirim <a href="https://prnt.sc/" target="_blank" rel="nofollow noopener noreferrer" style="color:#0033ff;">screenshot</a> komentar kamu di sini.</p>
    </div>';
    return $defaults;
}, 20 );

Could you please check if something in the theme or another filter is overriding this on Pages?

Hi @yingscarlett

Following advice from the WordPress support forum, I was asked to continue this investigation here.

WordPress support thread reference:
https://wordpress.org/support/topic/pages-layout-alignment-different-from-posts-2/

I’m still experiencing a layout alignment difference between Pages and Posts on my site.

WordPress version: 6.9.4

Example:
Post: https://yourdomain.com/windows-11-aio/
Page: https://yourdomain.com/donasi/

The WordPress moderator suggested the issue may be related to theme-level layout settings or template differences between posts and pages.

I have already checked:

• Layout settings in GeneratePress Customizer
• Page vs Post layout configuration
• Container / layout settings

But the issue still persists.

Could you please confirm:

• Whether GeneratePress applies different default layout wrappers for Pages vs Posts?
• Or if there is a known condition where Elements/hooks could affect only Pages?

Thank you.