Not display a block on mobile

Add a display condition for each block: I 'm thinking especially to the extract displayed dynamically by the paragraph block that can be a problem on phones, using too much space.

I think what you are trying to do is to hide the post excerpt on mobile phones, right? You can do that easily with CSS and media queries. For example, you can set a display: none; in CSS for mobile phones. Is that what you are trying to do, or did I misunderstood your question/request?

I agree with @Dev.tomi here.
Display conditions do serve another purpose, I guess.
The CSS properties will be your best friend in this use case.
Keep in mind that you can tweak your blocks not just by hiding them on specific breakpoints.

Thanks for the information.
I ‘m coming from elementor, where I had that kind of condition, so I ‘m not used to play with the display property

Your initial thinking was not bad.

Just FYI, you actually can conditionally output elements for various devices like mobiles, tablets, iOS, Android.

One of the options would be using Mobile Detect PHP library which uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

However, there is a caveat to this method. Device detection using PHP is not reliable and may not work…especially when caching is active.

Also, iPads don’t get detected under “Tablet” condition anymore.

Thanks for leaving the Dark Side :smile:

But on a serious note, you will learn so many web best practices when you move away from Elementor. It can be frustrating, and painful, but I guarantee you will feel more empowered.

1 Like