[Resolved] Display sidebars in a row

[James]

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

[Leo]

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

[James]

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

[Leo]

No problem 🙂

[Author]

Posts