[Resolved] Sidebar in 2 columns

[Anil]

Hi

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

Please guide

[David]

Hi there,

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

[Anil]

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

[David]

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 ?

[Anil]

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….

[David]

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

[Anil]

Thanks David, it is working fine.
Regards.

[David]

Glad to hear that !

[Anil]

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

[David]

Thank you! Glad to be of help

[Author]

Posts