Move comment box below sidebar widget on Mobile?

Hi there,

I think we can try some CSS.

Can you link me to the page in question?

ok great, thank you

Hi there,

Upon checking the structure of your website, one approach to move the Comments section to the right sidebar is through a PHP code:

add_action( 'wp', function() {
    remove_action( 'generate_after_do_template_part', 'generate_do_comments_template', 15 );
} );

add_action( 'generate_after_right_sidebar_content', function() {
    if ( is_page() || is_single() ) {
        if ( comments_open() || '0' != get_comments_number() ) :
            /**
             * generate_before_comments_container hook.
             *
             * @since 2.1
             */
            do_action( 'generate_before_comments_container' );
            ?>

            <div class="comments-area">
                <?php comments_template(); ?>
            </div>

        <?php
        endif;
    }
} );

Here is an article with regards to adding PHP: https://docs.generatepress.com/article/adding-php/

Adding it through plugin Code Snippets should work.

Hope this helps. Kindly let us know how it goes. :)

Thanks for you help. But im not wanting to move the comments to the sidebar.

In mobile the comment box is at the bottom of the post with the sidebar now below the comments.

I want to move the comments below the sidebar in mobile

I see. If that’s the case, you’ll need to alter the code I provided to something like this:

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

if(isMobile()) {
	add_action( 'wp', function() {
		remove_action( 'generate_after_do_template_part', 'generate_do_comments_template', 15 );
	} );

	add_action( 'generate_after_right_sidebar_content', function() {
		if ( is_page() || is_single() ) {
			if ( comments_open() || '0' != get_comments_number() ) :
				/**
				 * generate_before_comments_container hook.
				 *
				 * @since 2.1
				 */
				do_action( 'generate_before_comments_container' );
				?>

				<div class="comments-area">
					<?php comments_template(); ?>
				</div>

			<?php
			endif;
		}
	} );
}

This code would try to detect if the Device used is a mobile device, and place the comments section under the right sidebar content if so.

Kindly let us know how it goes. :)

Hmmm ok I understand.

Maybe it’s better if I created an element that put the widget after the content in mobile only

Is there a way to turn off the sidebar in mobile?

To remove the right sidebar, you’ll need a CSS code like this:

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

With regards to creating an element, you can definitely do that but you would still need the code above. You’ll basically need to replace generate_after_right_sidebar_content with the action hook of your preference.

And, for your suggestion, you would need a portable hook to hook back the comments section there.

Something like this:

function your_shortcode($atts, $content = null) {
      ob_start();
      do_action('hook_name');
      return ob_get_clean();
}
add_shortcode('portable_hook', 'your_shortcode');

Where hook_name is the name of the hook and portable_hook is the name of the shortcode. Then, you can place the shortcode in the Element you'll be creating, and replace generate_after_right_sidebar_content with hook_name.

If you plan to simply remove the sidebar, then you wouldn’t need to go through this PHP code. :)

Hope this clarifies. :)