I have developed a site and want to use it as PWA (Progressive Web App) as well.

But I want to hide specific elements in the PWA. I have tried the CSS approach:

@media all and (display-mode: standalone) {
.noShowApp {
    display: none;
}

}

And the JS approach:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}

if (isRunningStandalone()) {
    alert('hi');
    hide(document.getElementById('features'));
}

I get my 'alert' in the App, but the section I want to hide, is not hidden....

This is the section I want to hide:

<section class="py-5 border-bottom noShowApp" id="features">

Can someone point me in the right direction on how to get any of these methods (CSS or JS) to work. I prefer the CSS approach, but if that's not possible, JS will do just fine.