Hide features from specific devices with CSS

There are instances where you may need to conceal certain features from specific device platforms, such as browsers, native Android apps, or iOS apps. This functionality proves valuable when developing PWAs, as it allows you to hide features like QR Code Scan or Push Notifications from the browser platform or hide the PWA Push List feature from the native app, for example. By selectively hiding features, you can tailor the user experience based on the platform and optimise the functionality of your PWA.

Here are the default classes that you can use with your CSS.

• For Browser: .platform-browser
• For Android: .platform-android
• For iOS: .platform-ios

• For Overview: .platform-overview

  
  

Here is a general example of hiding homepage feature number-2 from the WebApp which works with major homepage layouts:

.platform-browser .homepage .layout li:nth-child(2) { display: none; }

.platform-android .homepage .layout li:nth-child(2) { display: block; }

.platform-ios .homepage .layout li:nth-child(2) { display: block; }

Here is another example of hiding homepage feature number-4 from the Native apps:

.platform-browser .homepage .layout li:nth-child(4) { display: block;}

.platform-android .homepage .layout li:nth-child(4) { display: none; }

.platform-ios .homepage .layout li:nth-child(4) { display: none; }

In some layouts, the default CSS class may not work then you need to find and use layout-specific CSS class.

Example:

Layout-6:

.platform-browser .layout.l6 div:nth-child(2) > a { display: none; }