Move sidebar bottom on tablet in GP 3 Flexbox

[Olivier]

Hello,

How to move the sidebar to the right on the blog home page and articles at the bottom of the page above the footer? Before I used css code:

@media (min-width: 769px) and (max-width: 1024px) {
.sidebar, .content-area {
    float: none;
    width: 100%;
    left: 0;
    right: 0;
    }
}

But since GP 3 and Flexbox, it no longer works.

Cordially.

[David]

Hi there,

try this CSS:

@media(max-width: 1024px) and (min-width: 769px) {
    .site-content {
        flex-direction: column-reverse;
    }
}

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

[Olivier]

Hello David,

It doesn’t work, it just puts the sidebar on the left above the content.

Cordially.

[David]

Can you share a link to the site ?

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

[Olivier]

Hello David,

Link to shared blog, sidebar is on blog page and on posts.

Cordially.

[Tom]

Give this a shot:

@media(max-width: 1024px) and (min-width: 769px) {
    .site-content {
        flex-direction: column;
    }

    .site-content .content-area {
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Olivier]

Hello Tom,

Perfect ! Thanks Tom 🙂

Cordially.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts