{"id":35,"date":"2025-06-12T16:11:45","date_gmt":"2025-06-12T16:11:45","guid":{"rendered":"https:\/\/devblog.40kts.cloud\/?p=35"},"modified":"2025-06-12T16:11:45","modified_gmt":"2025-06-12T16:11:45","slug":"how-to-hide-a-text-element-on-mobile-devices-in-bricks-builder","status":"publish","type":"post","link":"https:\/\/devblog.40kts.cloud\/index.php\/2025\/06\/12\/how-to-hide-a-text-element-on-mobile-devices-in-bricks-builder\/","title":{"rendered":"How to Hide a Text Element on Mobile Devices in Bricks Builder"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p>Sometimes, you want to hide specific elements like a language switcher on mobile devices to keep the layout clean or reduce visual noise. Luckily, Bricks Builder makes this very easy \u2013 though honestly, I didn\u2019t spot the option right away when I first looked for it. Here&#8217;s how you can do it using two simple methods.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Use Built-in Visibility Settings in Bricks<\/h3>\n\n\n\n<p>The easiest way is to use Bricks Builder&#8217;s built-in visibility options:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the element you want to hide (e.g., the one with the class <code>.language-switch<\/code>).<\/li>\n\n\n\n<li>In the left panel, go to <strong>Layout<\/strong>.<\/li>\n\n\n\n<li>Scroll down to the <strong>Visibility<\/strong> section.<\/li>\n\n\n\n<li>Enable <strong>Hide on Mobile<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>This will automatically hide the element on screens smaller than 768px, which includes most smartphones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Use Custom CSS with a Media Query<\/h3>\n\n\n\n<p>If you prefer full control via CSS, or want to define custom breakpoints, use this snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 767px) {\n  .language-switch {\n    display: none !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>You can place this under <strong>Theme Styles &gt; Custom CSS<\/strong> or inside the element\u2019s <strong>Custom CSS<\/strong> field in Bricks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adjusting for Larger Breakpoints<\/h3>\n\n\n\n<p>The example above targets mobile devices only. If you want to hide the element on tablets or smaller laptops too, just increase the max-width value:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width: 991px) {\n  .language-switch {\n    display: none !important;\n  }\n}<\/code><\/pre>\n\n\n\n<p>This will hide the element on devices up to 991px wide, which typically includes tablets in portrait mode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Hiding elements in Bricks Builder is really straightforward once you know where to look. Whether you use the built-in visibility settings or write a quick media query, both methods give you clean, responsive control over your layout. And yes \u2013 it\u2019s obvious in hindsight, but I definitely missed it the first time too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, you want to hide specific elements like a language switcher on mobile devices to keep the layout clean or reduce visual noise. Luckily, Bricks Builder makes this very easy \u2013 though honestly, I didn\u2019t spot the option right away when I first looked for it. Here&#8217;s how you can do it using two simple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":1,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/posts\/35\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblog.40kts.cloud\/index.php\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}