How to Hide Layers Widgets on Mobile or Certain Devices

How To  Last Updated: Time to Read: 1 minute

Hiding widgets on specific devices is helpful in cases where you have content optimized for desktop browsers (such as background video) that may not do well on mobiles, in which case you can hide the widget on mobile screen sizes. It is also helpful for creating device-targeted content, such as mobile-visitor promotions.

Layers Pro enables an option found under Advanced in the widget design bar that allows you to hide the widget on specific screen sizes, specified by mobile (small screens up to 720px), tablet (medium screens up to 1024px) or desktops (from 1024px and up).

  1. Click the Advanced button in the widget or column options bar.
  2. Expand Hide on Certain Devices
  3. Click the icon for the screen type you want the widget hidden for

Any element can be hidden with CSS by using the display: none; declaration. The trick is knowing how to uniquely target the thing you want hidden. For a general primer, see CSS Styling Using the Browser Inspector & Customizer

To hide an entire widget, you can give it a widget ID, then use that ID to target it:

  1. Click the Advanced button in the design bar
  2. Expand the Widget ID section
  3. Enter a unique ID such as “services-section” or similar. Avoid common terms like “widget”, “section”, or “row”.
  4. Enter your CSS into DevKit under the screen size you want the section hidden for. Example

#services-section{display: none;}

If you do not have DevKit, you will need to formulate the media query for the screen size you want this style loaded for. To learn more about Responsive CSS, see How to Customize the Mobile or Responsive Views