Archived topic
Display sidebars in a row
3 replies · Started by James on December 4, 2020
Viewing posts 1–4 of 4
Hello,
My right sidebar width is fixed at 300px and I have a breakpoint set at 990px width to move the sidebars to the bottom using the below CSS.
@media(max-width: 991px) {
.right-sidebar .site-content {
flex-direction: column;
}
.site-content .content-area {
width: 100%;
}
}I want to display the 2 sidebars beside each other at the bottom when the width is between 600px-990px. I have tried adding the following CSS but it doesn't seem to work.
.inside-right-sidebar {
flex-direction: row;
}Hi there,
Try changing this:
@media(max-width: 991px) {
.right-sidebar .site-content {
flex-direction: column;
}
.site-content .content-area {
width: 100%;
}
}to this:
@media(max-width: 991px) {
.right-sidebar .site-content {
flex-direction: column;
}
.site-content .content-area, .right-sidebar #right-sidebar.sidebar {
width: 100%;
}
}Then add this:
@media (max-width: 768px) {
.separate-containers .inside-right-sidebar {
display: flex;
}
.separate-containers .inside-right-sidebar .widget {
flex-basis: 50%;
}
}Hi Leo,
Your code didn't exactly work as I wanted, but it got me on the right track. Thanks.
Here is the code that I ended up with in case anyone is looking for the same solution.
@media(max-width: 991px) {
.site-content {
flex-direction: column;
}
.site-content .content-area, .right-sidebar #right-sidebar.sidebar {
width: 100%;
}
.inside-right-sidebar {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.inside-right-sidebar .widget {
flex-basis: 300px;
border-style: solid;
border-radius: 20px;
}
.inside-right-sidebar .widget:last-child {
margin-bottom: 20px;
}
}No problem :)
This archived topic is closed to new replies.
