[Resolved] How to fix sidebar width

Home Forums Support How to fix sidebar width

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1347913
    Rachel

    Hi,

    I am searching for the most efficient CSS to add to my site to fix my right sidebar width to 300 px to accommodate an ad network. Currently the sidebar width shrinks as the page width shrinks.

    I need the sidebar width to remain at 300 px for all screen sizes greater than 1023 px.

    I have found a number of different CSS recommendations in the support forum, and don’t know which to apply – can you please advise the best way to make this happen?

    My container width is 1100 with content padding left and right at 40px. The sidebar width is set at 30%.

    Thanks,
    Rachel

    #1348025
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media(min-width: 1024px) {
        .right-sidebar .content-area {
            width: calc(100% - 300px);
        }
        .right-sidebar #right-sidebar {
            width: 300px;
        }
    }
    #1351176
    Rachel

    Hi David,

    This works, but i noticed that the standard setting for the sidebar is for it to display until the mobile breakpoint of 769 px.

    So on a full sized tablet in portrait, the sidebar takes up almost half the width. Is there a way to change the breakpoint for tablets so it switches to mobile and doesn’t display the sidebar when in portrait?

    Thanks,
    Rachel

    #1351370
    David
    Staff
    Customer Support

    Try this:

    .right-sidebar .site-content {
        display: flex;
    }
    
    @media(max-width: 834px)  {
        .right-sidebar .site-content {
            flex-direction: column;
        }
        .right-sidebar .content-area,
        .right-sidebar #right-sidebar {
            width: 100%;
        }
    }
    
    @media(min-width: 835px) {
        .right-sidebar .content-area {
            width: calc(100% - 300px);
        }
        .right-sidebar #right-sidebar {
            width: 300px;
        }
    }

    This will stack the Content / Sidebar at 834px which will apply to the 10.5″ ipads and below.
    You can adjust the two media query values to suit.

    #1355036
    Rachel

    Thanks David, that has worked great. Cheers, Rachel

    #1355117
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.