Increase width of sidebar

Hi @strictlyonlinebiz,

It is definitely possible to tweak the widths between the main column and sidebar. There is a general container div with the class .col-full. This gets a calculated property (based on the number of columns and their width), but to make things simpler the max width it allows is max-width: 66.4989378333em;. If you wanted to make that wider you’ll want to first change that width, try something like 80em.

Beyond that the .col-full div has the primary content area and the secondary widget area within it. You can then adjust your width of each of these divs in a percentage based calculation that eventually adds up to 100% in the end.

These are again calculated with some fun SCSS formulas, but they are currently as follows if your sidebar is on the right side of the site.

@media (min-width: 768px) {

  .right-sidebar .content-area {
      width: 73.9130434783%;
      margin-right: 4.347826087%;
  }

  .right-sidebar .widget-area {
      width: 21.7391304348%;
      margin-right: 0;
  }

}

Just to confirm that does all add up, 73.9130434783% + 4.347826087% + 21.7391304348% = 100%

So for what you are after you’ll want to make the .right-sidebar .content-area width a little smaller. Then increase your .right-sidebar .widget-area appropriately. For example, this would make the sidebar wider and main content a little thinner and add up to 100%.

@media (min-width: 768px) {

  .right-sidebar .content-area {
        width: 70%;
        margin-right: 3%;
  }

  .right-sidebar .widget-area {
      width: 27%;
      margin-right: 0;
  }

}

Here is a before & after for how that looks.

BEFORE:

Link to image: https://cld.wthms.co/hJUNjM

AFTER:

Link to image: https://cld.wthms.co/RTlKTK

• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.
• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.
• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.
• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.

@ryanr14 Thanks a lot man. It worked

Hi @strictlyonlinebiz,

Happy to help! ??