Hello.
So, I followed this tutorial : How to add a table of contents to your Ghost site
I wanted to make a sticky table of contents (like shown at the bottom). The problem is, I just can’t figure out how to get the alignment of the content (text) back.
From what I understand, the code creates a grid with 2 columns in 1 column the content of the post in the other the TOC. But I can’t figure out values or another way to do it to align the content back in the middle.
A screenshot of the issue :
Here’s the modifications I made to post.hbs
And here’s the modified CSS (since it seemed to be outdated) :
.gh-content h2,
.gh-content h3 {
outline: none;
}
body {
overflow: visible;
}
.cont {
display: grid;
grid-template-columns: 1fr 0.2fr;
padding: 0 0 6vw;
margin: 0;
}
.toc-container {
order: 1;
}
.toc-container .toc {
position: sticky;
top: 70px;
min-width: 260px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
line-height: 1.6em;
padding: 0 0.8em;
}
.is-active-link::before {
background-color: #3eb0ef;
}
ol.toc-list {
margin: 0;
}
Thanks in advance for any help