Page Speed Issue for TOC

Hi @suzieb! Thanks for letting us know. You’re right: this is indeed a CSS issue, since the “Tap targets” (in this case referring to the clickable elements within the table of contents) may be too small and/or are too close together. In your case, switching to two-column display worked for one site but didn’t work for another. Can you share a link to both of those sites? Depending on the differences between the CSS files used in the two sites, we’d either be able to provide a fix that would work on both sites (in which case we may be able to make the fix part of the plugin itself) or have two separate fixes that would be customized for each site.

Hi Alexis,

I’d rather not put the websites here, if this info doesn’t help is there a way to send them privately?

They both have the free version of Generate Press with the Child theme. The only additional CSS on both is:

/*Hide featured image on single pages*/
.page-header-image-single {
      display: none;
}
/*Display modified date*/
.posted-on .updated {
display: inline-block;
}
.posted-on .updated + .entry-date {
display: none;
}
.posted-on .updated:before {
    content: "Last Updated ";
}

Thanks for any help you can provide!

Hi @suzieb! Thanks for providing further details. We’ve tested the Table of Contents while using the GeneratePress theme and ran Chrome’s Lighthouse on it, and the Tap Targets message came up as well. Since the issue was caused by insufficient spacing between the links within the Table of Contents, it could be solved by providing adequate spacing between them. Here’s a CSS code snippet that you can paste to the custom CSS of both of your sites.

@media screen and (max-width: 600px){
    .ub_table-of-contents li:not(:last-child){
        margin-bottom: 5px;
    }
    .ub_table-of-contents li>ul{
        margin-top: 5px;
    }
}

You may increase the margin values if the Tap Targets message still appears.

Please let us know how it goes.

That fixed it. Thank you!