Docs

[JurgaR]

Hello,

I have been reading in the forums and found (and successfully used) the following code for Table of Contents within the same page (see below). However, the table of contents is very narrow, not all of the text is visible and it just looks strange. Is it possible to somehow make it full width (responsive, so that it’s full width, no matter which device is used). I am using widget area on the blog posts, just to be clear when I say full width, I mean as wide as the rest of the post :).

Thanks a lot!
Best regards, Jurga

<div class=”x-toc”>
<h4 class=”h-toc”>Table of Contents</h4>
<ul class=”unstyled cf”>
<li class=”x-toc-item”>I. Planning
<li class=”x-toc-item”>II. Research
<li class=”x-toc-item”>III. Content + Messaging
<li class=”x-toc-item”>IV. Design
<li class=”x-toc-item”>V. Evaluation
<li class=”x-toc-item”>VI. Testing
<li class=”x-toc-item”>VII. Launch
<li class=”x-toc-item”>VIII. Support

</div>

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[JurgaR]

The post is not online yet. My website is http://fullsuitcase.com
So you need login credentials as well?
Thanks a lot!
Jurga

[Christian]

Please give us the URL of the post where you’ve setup TOC and also access to your WordPress admin.

Thanks.

[JurgaR]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. You are not using Cornerstone so it’s kinda infeasible to control layout as you can’t add custom class easily unless you edit HTML. However you can add this under Custom > CSS in the Customizer.

.x-toc {
  max-width: 450px;
  width: 100%;
}

Let’s change the max-width if needed or take it off. I have added that to restrict the width for larger screens.

Cheers!

[JurgaR]

Super! Thanks a lot!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts