[Resolved] Hiding Table of Contents On Mobile

[Mark]

I cannot get my TOC plugin to format well on mobile Is there a quick CSS I can use to hide it?

[Leo]

Hi there,

If you can add a custom class to the table then you can use the built-in hide-on-mobile class:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if this helps 🙂

[Mark]

Ok, I was trying to do it globally across the site.

[Leo]

Where can I find one in your site?

[Mark]

Each post has one on the 2nd paragraph. You’ll see on mobile that formating doesn’t look great when expanded.

[Leo]

Hmm I wonder if this would work:

@media (max-width: 768px) {
    .lwptoc{
        display: none !important;
    }
}

[Mark]

Nope, that didn’t do it.

[Leo]

Is this what you are referring to?
https://www.screencast.com/t/gbFFdr7RTeVR

If so the code should work but I’m not seeing the CSS being added.

Make sure to clear all caching plugins including Autopimize?

[Mark]

No, I’m referring to the “Article Contents” box at the top of the page. It’s the LuckyWP Table of Contents plugin.

[Leo]

Try the edited CSS:
https://generatepress.com/forums/topic/hiding-table-of-contents-on-mobile/#post-953438

[Mark]

It didn’t work but I think I found a workaround. Thanks

[Leo]

Awesome 🙂

[Author]

Posts