[Resolved] Display sidebars in a row

Home Forums Support [Resolved] Display sidebars in a row

Home Forums Support Display sidebars in a row

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1567908
    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;
    }
    #1567995
    Leo
    Staff
    Customer Support

    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%;
        }
    }
    #1568118
    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;
         }
    }
    #1568752
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.