Archived topic

How to fix sidebar width

5 replies · Started by Rachel on July 1, 2020

Viewing posts 1–6 of 6

July 1, 2020 at 2:58 am #1347913

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

July 1, 2020 at 4:58 am #1348025

Hi there,

try this CSS:

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

July 3, 2020 at 7:10 pm #1351176

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

July 4, 2020 at 1:38 am #1351370

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.

July 7, 2020 at 4:45 am #1355036

Thanks David, that has worked great. Cheers, Rachel

July 7, 2020 at 6:11 am #1355117

Happy to be of help

This archived topic is closed to new replies.

Start building better websites today.