[Resolved] Hide class with Table of content

[Samuel]

Hello,

I have a problem with the use of the .hide-on… class and the use of a table of content. In a post I wanted to organise all things differently on mobile and on desktop so I tried to use the hide-on-mobile / hide-on-desktop classes. Problem is I’m using a plugin to generate a table of content with all my H2 and as I’m displaying h2 differently on mobile and desktop it appears that this plugin display each H2 twice on the table of content…

If you can help with this it would be much appreciated, if not I’ll will do a manual table of content.
Thanks !

PS : it’s LuckyWP Table of Contents that I’m using.

[David]

Hi there,

so do you have a H2 that is displayed only on desktop and a separate H2 just for Mobile ?
What is the difference between the two H2’s?

[Samuel]

Basically I need to display similar content differently on mobile and desktop so I made 2 groups of similar content and I applied class on each : On desktop content is displaying H2 / Image / Text, and on mobile the same content is displaying Image / H2 / Text.

But finally I decided to make 2 tables of content annually, applying classes on each, and it works, so maybe better to not looking too deeply into that 😉

Thanks David !

[David]

If the H2 / image / text are within a container then we could just use some CSS to re-order them for mobile ….. if i can see how its built then i may be able to advice…

[Samuel]

Post is offline but basically it’s same as this one : https://monvoyageencolombie.com/geographie-routes-meteo/

Idea is to display on Desktop :
H2 / H3 / Image / Text

and display on Mobile :
Image / H2 / H3 / Text

[Leo]

Can you duplicate the set up on a staging server so we can help easier?

Thanks!

[Samuel]

Hi Leo, here is the post : https://monvoyageencolombie.com/dix-livres-colombiens-a-lire/

For now as I said I duplicated all content twice to display it differently on mobile and on desktop and I made a table of content manually for each display as well.

[David]

Hard to do it with your current setup as the image is within a columns container, so it cannot be moved above the H2/H3 without moving the text as well

But you can do it with GenerateBlocks.

If you use a Grid Block with 4 grid items
Grid Item 1 > H2 > Width 100%
Grid Item 2 > H3 > Width 100%
Grid Item 3 > Image > Width 50%
Grid Item 4 > Text > Width 50%

Then for Mobile set them all to 100% width to stack.
Edit Grid Item 3 in mobile view – under Layout you can set Order to -1 ( negative 1 ). This will move it to the top of the stack.

[Samuel]

Thanks David,
Do you think it’s a better solution than duplicating all blocks and applying hide class ?

[David]

Personally yes – i hate the thought of having duplicate content for the sole purpose of responsive styles …. its a very elementor thing to do lol

Alternative – you could just dupe the Headings, add add your mobile ones below the Image Block.

[Author]

Posts