Archived topic
Sidebar in 2 columns
9 replies · Started by Anil on August 2, 2020
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