Customize layout column widths

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.

/* 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%;
  }
}

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:

/* 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%; */
  }
}

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