The following works pretty well.
All the content in the site, including header and footer content, now fit in the specified width percentage.
The page content, takes up the width percentage specified, but as a percentage of the specified percentage. (e.g. 80% of 80%)
I also experimented and enabled a sidebar. No issues, in fact, the main page content is just pushed to either side comfortably.
Check it out at
cg.fulaus.com!
@media (min-width: 768px) {
.container {
width:90%;
}
}
@media (min-width: 992px) {
.container {
width:85%;
}
}
@media (min-width: 1200px) {
.container {
width:80%;
}
}
There are some caveats: The dokuwiki style tools layout doesn't move to the border of the content. TOC button also doesn't stick inside. Config settings table layout becomes a mess.