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

Can i see the actual website too ?

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

You’re welcome