Adjust Sidebar widths or switch them

Hi there,

This CSS should switch the widths for those two sidebars on screens that are wide enough to show all three columns:

@media screen and (min-width: 1101px) {
  div#secondary.widget-area.sidebar-left {
    width: 20%;
  }
  div#tertiary.widget-area.sidebar-right {
    width: 14%;
  }
}

That seems to have done the trick, thank you very much!

Actually I do have a question – I notice there is a fair sized “gutter” between the Posts column and the two sidebar columns.

On mobile of course these just align vertically.

But for desktop, I guess I could increase those percentages for the sidebars a bit and tighten the gutters a bit? Or should the values of 20% and 14% be kept as some best practice?

Thanks again.

Sure. Replace that code with this instead:

@media screen and (min-width:1101px) {
  div#secondary.widget-area.sidebar-left {
    width:20%;
    margin-left: 2%;
  }
  div#tertiary.widget-area.sidebar-right {
    width:18%;
    margin-left: 2%;
  }
}

The default margin is 3.75% in both cases. For the left sidebar, just modifying the margin value will automatically make the column wider, but for the right sidebar you’ll need to reduce the margin and at the same time increase the width, so feel free to play around with those values until it looks the way you want.

Personally I wouldn’t go any smaller than 1.5% on the margins – with that margin you’ll be able to go up to 19.5% on the right sidebar width.

@media screen and (min-width:1101px) {
  div#secondary.widget-area.sidebar-left {
    width:20%;
    margin-left: 1.5%;
  }
  div#tertiary.widget-area.sidebar-right {
    width:19.5%;
    margin-left: 1.5%;
  }
}

Again, thank you very much, including for the detailed explanation.