Site logo

Archived topic

Sidebar in 2 columns

9 replies · Started by Anil on August 2, 2020

Viewing posts 1–10 of 10

Hi

I want to have sidebar in 2 columns @media (min-width: 600px) and (max-width: 767px)

Please guide

Hi there,

can you explain a little more?
Do you want the desktop layout to be kept as low as 600px?

Yes David. 2 columns blog is set at that width also.

sorry still not clear.
Currently on Desktop you have 3 columns: Archive Column 1 | Archive Column 2 | Sidebar
Do you want to keep that layout at 600px ?

At 600 = 2 columns of archive

sidebar which flows down after this, it is displayed in 1 wide column of 600px width...

Can I float different widgets of sidebar with 50% width appearing as 2 columns of widgets of sidebar....

Aah ok. Try this:

@media (max-width: 768px) and (min-width: 600px) {
    #right-sidebar .inside-right-sidebar {
        display: flex;
        flex-wrap: wrap;
    }
    #right-sidebar .widget {
        flex-basis: calc( 50% - 5px );
    }
    #right-sidebar .widget:nth-of-type(even) {
        margin-left: 5px;
    }
    #right-sidebar .widget:nth-of-type(odd) {
        margin-right: 5px;
    }
}

Thanks David, it is working fine.
Regards.

Glad to hear that !

Thanks David, I believe you a maestro in CSS.
Regards

Thank you! Glad to be of help

This archived topic is closed to new replies.