- This topic has 9 replies, 3 voices, and was last updated 1 week, 2 days ago by David.
May 23, 2020 at 1:56 am #1297709Samuel
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.
PS : it’s LuckyWP Table of Contents that I’m using.May 23, 2020 at 3:52 am #1297820DavidStaffCustomer SupportMay 23, 2020 at 4:00 am #1297822Samuel
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 !May 23, 2020 at 4:26 am #1297839DavidStaffCustomer SupportMay 23, 2020 at 7:15 am #1298035Samuel
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 / TextMay 23, 2020 at 11:00 am #1298353LeoStaffCustomer SupportMay 24, 2020 at 4:07 am #1299084Samuel
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.May 24, 2020 at 6:41 am #1299203DavidStaffCustomer 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.May 25, 2020 at 1:20 am #1300099Samuel
Do you think it’s a better solution than duplicating all blocks and applying hide class ?May 25, 2020 at 2:50 am #1300197DavidStaffCustomer 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.
- You must be logged in to reply to this topic.