[Resolved] Hide class with Table of content

Home Forums Support Hide class with Table of content

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1297709
    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.

    #1297820
    David
    Staff
    Customer Support

    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?

    #1297822
    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 !

    #1297839
    David
    Staff
    Customer Support

    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…

    #1298035
    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

    #1298353
    Leo
    Staff
    Customer Support

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

    Thanks!

    #1299084
    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.

    #1299203
    David
    Staff
    Customer Support

    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.

    #1300099
    Samuel

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

    #1300197
    David
    Staff
    Customer Support

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.