History: Customize layout column widths

            {DIV(class="lead")}Tiki uses the [https://getbootstrap.com/docs/5.3/layout/grid/|Bootstrap grid system] to lay out the 12-column grid for content on the page, specifically, 2-8-2 or 3-9 or 9-3 combinations, that is, columns of 2/12, 8/12, and 2/12 of the container width, for example. But if a side column width of 3/12 the container width, or some other column width, might be better for some use cases, here's a somewhat hacky method to do that.{DIV}

This method doesn't change the Bootstrap column width classes used in Tiki's page layout, it just redefines them; it gives them the percentage size of the desired column size.

These column size changes are made only for large screens, not for phones or tablets, so the names of the classes to be redefined all begin with -+col-lg- +-. To find the percentage width of the larger column size, search any Tiki theme stylesheet for "col-lg-4" or "col-lg-5", etc. 

This CSS shows how the default col-lg-2 side columns and col-lg-8 center column are redefined to be the size of col-lg-3 and col-lg-6 columns, respectively. In practice, the commented-out code can be removed. It's just shown here to indicate where the changes were made.
{CODE()}
/* Use col-lg-3 width */
@media (min-width: 992px) {
  .row-middle> .col-lg-2 {
    flex: 0 0 auto;
    /* width: 16.66666667%; */
    width: 25%;
  }
}

/* Use col-lg-6 width */
@media (min-width: 992px) {
  .row-middle > .col-lg-8 {
    flex: 0 0 auto;
    /* width: 66.66666667%; */
    width: 50%;
  }
} {CODE}

The CSS also needs to be modified for the case when one of the side columns is hidden via the side-column toggle icon. What needs to be done is subtract the new side-column width from 100% to get the new center column width, when a side column is hidden, as shown here:
{CODE()}
/* Adjust col1 width when col3 is hidden */
@media (min-width: 992px) {
  .hide_zone_right #col1.col-lg-8,
  .hide_zone_left #col1.col-lg-8 {
    width: 75%; /* 83.3334%; */
    flex: 0 0 75%; /* 0 0 83.3334%; */
    max-width: 75%; /* 83.3334%; */
  }
}
{CODE}

If there are any questions or comments about this method, please post in the forums at tiki.org or in Tiki's Matrix chatroom.