Sometimes you want to hide features from specific device platform such as browser, native Android or iOS app. This will be very useful while you are making the PWA and you want to hide features like QR Code Scan, Push Notification etc from the browser platform or you want to hide PWA Push List feature from the native app etc.

So here are 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, default CSS class may not work then you need to find and use layout specific CSS class.

Examples:

Layout-6:

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

Layout-Swipe:

.platform-browser .layout.layout_siberian_swipe .swiper-slide:nth-child(3) { display: none; }