[Resolved] How to fix sidebar width

[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

[David]

Hi there,

try this CSS:

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

[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

[David]

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.

[Rachel]

Thanks David, that has worked great. Cheers, Rachel

[David]

Happy to be of help

[Author]

Posts