Changing the Sidebar Width

Hey there,

Try this CSS to get started with:

@media all and (min-width: 43.75em) {

  .sidebar-primary {
    width: 36%;
  }
}

You can copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

That will made the sidebar wider without affecting the overall layout, but it is possible to increase it further if needed.

Thank you, Ben. That works great! What do I need to add to change the content so the total is still 100%?

Sure thing!

That code is expanding the sidebar into some of the space that is usually between the content and sidebar. Normally, it is 60/32 with 8% left between, and now it is 60/36 with 4% left in between.

I actually wanted to make the sidebar a little narrower, so is there a way to make the main content area wider and keep the 8% gap?

Oh I see. Please use this snippet instead then:

@media all and (min-width: 43.75em) {

  .sidebar-primary {
    width: 28%;
  }
  .main {
    width: 64%;
  }
}