Conditions for Screen Sizes

Be great to use conditions to hide/show elements based on screen size - in particular with headers on tablet / mobile / desktop when you need to move things about and even display things very differently - it would be great to remove as much html as possible without just CSS hiding it?


I’m afraid the condition by any builders can’t detect screen size.

Hmm, fair OK.

No better way this could be done?

Only PHP can hide the HTML output.

So, to hide those elements(not html) on mobile, you can only achieve it with breakpoints styling. With :nth-child

Cheers Jornes. I use that already dude, I was meaning more like when your menu is completely different on different screen sizes.

Fully support the idea! :+1: Excessive html that is hidden via display: none in templates is unnecessary. This is a bad practice, especially for seo. Why would search engine crawlers download useless code? If you have a lot of such code, you will have unobvious problems.


Just a simple example but something like this with PHP - but built into a nice UI within Bricks say? :pray:

$user_agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/mobile/i', $user_agent)) {
    echo '<div class="mobile-content">This is content for mobile devices.</div>';
} else {
    echo '<div class="desktop-content">This is content for desktop devices.</div>';

1 Like

It seems this still isn’t available a year and a half later and I hope this is something that can be added. In the mean time, I was considering blending tailwinds, but i’m not so sure how well it would work.

1 Like

I already suggested implementing the Mobile Detect library. This would be a good option.


This is a shame. Elementor has had this feature for years.

I assume that the main reason why this feature is request is to have a mobile and desktpo version - two distinct elememts - and then show only one based on breakpoint.

For this scenario display: none is enough to do it.

Do you guys have other “reasons/scenario” where you will need conditions ??