How to get two-column layout with TOC in Minimal Mistakes?

Help
1

I have a page with a complex table of contents with three levels of nesting and no author_profile. The main content is unnecessarily constrained to the middle column, while the left column is just wasted space. I would like the content to fill two columns instead of just the middle one. I’ve seen from https://mmistakes.github.io/minimal-mistakes/docs/layouts/#custom-sidebar-navigation-menu that I could create a custom menu on the left side by duplicating lots of content, but I think this will turn into a maintenance headache.

Would I need to customize the theme to get what I’m looking for?

Using this front matter:

author_profile: false
toc: true
classes: single

Here’s the relevant part of my _config.yml:

>   - scope:
>       path: ""
>       type: pages
>     values:
>       layout: single
>       classes: wide

image
image1068×1406 280 KB

2

Yes you’d need to customize some CSS to do what you want.
Each of the columns are floated right. If you change that to float: left and then remove the negative width on the main content that leaves room for a TOC column you’ll get the results you want.

I suggest inspecting the elements with your browser’s development tools to determine the CSS you need. Then add that back into the theme (or override it).

image
image1696×825 131 KB

3

For anyone who are navigated here:

Add the following content to the bottom of assets\css\main.scss

.page {
    @include breakpoint($large) {
        padding-right: 0;
    }

    @include breakpoint($x-large) {
        padding-right: 0;
    }
}