Sceer Size Dependent Sidebars

Hi Lutz,

1. Go to customizer > layout > sidebars, and set the sidebar layout you want on the desktop for the homepage.

2. Go to appearance > elements, create a new layout element, set the sidebar layout you want for mobile, and add Front page to the location, write down the element's ID, which can be found in the URL of the element editor.

3. Add this PHP code, and replace 100 with your element's ID.

add_filter( 'generate_element_display', function( $display, $element_id ) {
    if ( 100 === $element_id && !(wp_is_mobile()) ) {
        $display = false;
    }

    return $display ;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

4. Add this CSS if you want the left sidebar appear first:

@media (max-width: 768px) {
    #left-sidebar {
        order: -1;
    }
}

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

Hi Ying.
Tip 1. to 3. works fine - thanks!
But re-ordering the sidebars with the CSS causes a new problem. The sidebars are re-ordered correctly (fine), but: the separators between sidebar/primary/sidebar are not correctly re-placed. There is no space between the primary content and the lower sidebar - but double-sized space between upper sidebar and primary content.
-Lutz

Hi there,

to share a screenshot you need to provide the URL that links to the image, you can save the image in cloud drive, your WP media library or use one of the many image sharing services.

Thanks.
See the screenshots (link in private information area) ...
-Lutz

Can i see the actual website too ?

Hi.
The site is currently in work - but I leave the parts which causes the problem with the sidebar separators unchanged.
So you can check it.
URL and login in the private informations.
-Lutz

Try changing #4 css to:

@media (max-width: 768px) {
    #left-sidebar {
        order: -1;
    }
    #main,
    .entry-content {
        margin-top: 0 !important;
        margin-bottom: 1.2em !important;
    }
}

Perfect - that's it!
Many thanks.
-Lutz

You're welcome