Changing Split Sidebars width on a per page basis
Xtreme has Per Page Sidebar Width option, but only for single sidebar.
If you want to change the Split Sidebars width on a single page, you need to use the rules below
For regular Split Sidebars not using smart margins use
@media screen and (min-width:768px) { .page-id-xxx .l-sb-right-split{width:20%} .page-id-xxx .l-content-ssb{width:66%;margin-left:14%;} .page-id-xxx .l-sb-left-split{margin-left:-80%;width:14%} }
The way to calculate the values is as follow
- In the first and third rule you set the width of the right and left sidebar (here 20% and 14%)
- In the second rule, the width (of the content) needs to be 100% minus Width of sidebars, here 100-20-14 = 66%
- The margin left is the left sidebar width
- In the third rule, the margin left must be negative of the content width plus content margin-left here 66+14=80%
For regular Split sidebar but using Smart margins, use
@media screen and (min-width:768px) { .page-id-xxx .l-sb-right-split-lm {width:20%} .page-id-xxx .l-content-ssb{width:63%;margin-left:16%;} .page-id-xxx .l-sb-left-split-rm {margin-left:-79%;width:15%} }
The way to calculate the values is as follow
- In the first and third rule you set the width of the right and left sidebar (here 20% and 15%)
- In the second rule, the width (of the content) needs to be 100% minus Width of sidebars and twice smart margin, here 100-20-15-1-1 = 63%
- The margin left is the left sidebar width plus smart margin, here 15+1=16
- In the third rule, the margin left must be negative of the content width plus content margin-left here 63+16=79%
For Split Sidebar stacked on top without smart margin use
@media screen and (min-width:768px) { .page-id-xxx .l-sb-right-split{width:25%} .page-id-xxx .l-content-ssbs {width:60%;} .page-id-xxx .l-sb-left-split-top {width:15%} }
Just make sure the sum of the width is 100%
For Split stacked using smart margins use
@media screen and (min-width:768px) { .page-id-xxx .l-sb-right-split-lm {width:24%} .page-id-xxx .l-content-ssbs {width:60%;} .page-id-xxx .l-sb-left-split-top-rm {width:14%} }
Make sure the total of the width is 100% minus twice the smart margin (1% by default), here 98%