Table of contents in Headline theme

[querlyquar]

I have installed exactly step by step the table of contents according to this guide: How to add a table of contents to your Ghost site

The table of contents shows up fine on the mobile version of the site, but on the computer it creates a big blank space as in the picture:

Here you can see it live: 43 Ideas for making money online in 2022. (where to look + earnings)

Does anyone have a solution on how to fix this?

The Ghost website states:

In this tutorial, we’ll be using Ghost’s default theme, Casper, but the steps here apply to any Ghost theme.

So it should work with the official template.

[RyanF]

This is happening because of how CSS Grid works.

Try adding the following to your CSS:

@media (min-width: 1300px) {
    .gh-toc {
        position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
        top: 4vmin;
        grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
        height: 0; /* This should fix the spacing issue */
        padding-right: 8rem; /* This will give your TOC a bit more room to breath */
   }

I’ll look at updating the TOC tutorial to reflect these changes.

[querlyquar]

It works!
Thank you for your help :)

[RyanF]

No problem! Let me know if you run into any other bugs.

[querlyquar]

Unfortunately, I found another bug - when the table of contents is too long its elements invade the footer
Video how it looks: footer
Live post: here

[RyanF]

Thanks for letting me know

Updated the tutorial again. Check it out:

How to add a table of contents to your Ghost site