Archived topic
Mobile/desktop display rules don't seem to work
3 replies · Started by Gabriele on September 15, 2021
Hi there!
I have created a Block - Hook (generate_after_header) to re-use as the blog posts "title", and set some rules for the Display conditions to some of the blocks (from Advanced > Display Conditions > Responsive visibility) to create a different look from mobile to desktop.
These conditions don't seem to apply.
Could you please help with that one?
(example page https://creaators.com/?p=118 - you will see that the author stage and date appear twice, but would like to have the condition for one of the to show up on mobile and the other on desktop)
Thanks a lot,
G
Hi Gabriele,
and set some rules for the Display conditions to some of the blocks (from Advanced > Display Conditions > Responsive visibility)
This setting sounds like from another plugin? As neither GP or GB has this setting.
To achieve what you are looking for, you can use the built-in GP class: hide-on-mobile and hide-on-desktop.
For example, add hide-on-mobile to the block that you DO NOT want it to show on mobile.
This is how you add additional CSS class for blocks in WordPress:
https://wordpress.com/support/adding-additional-css-classes-to-blocks/
Let me know if you need further assistance :)
Hi Ying,
Thought I had seen this in a GP video, but I might be mistaken then. Do you know what Plugin might be managing this?
Aside from that, which isn't very important, can you please share the class for hiding on tablet?|
Also, I presume I'm just supposed to add this to the custom css classes (Advanced > Additional CSS class(es))?
Thanks!
G
presume I’m just supposed to add this to the custom css classes (Advanced > Additional CSS class(es))
Yes, that's correct. The class ishide-on-tablet :)
I'm not sure which plugin offers that setting (Advanced > Display Conditions > Responsive visibility), but usually 3rd party block plugin doesn't work in GP's element:
https://docs.generatepress.com/article/block-element-overview/#third-party-block-plugins
