Remove Navigation Menu / Header On Mobile - Brine Template

Hi there - I am trying to create my own landing page, using index pages.  I have tried using code to remove the navigation menu / header - this works on desktop, but still shows on mobile.  Is there a code I can use to remove the navigation / header / logo / search at the top of certain pages?  I am using the BRINE template.  Thanks!

Here is the codes I have used that works on desktop, but not on mobile:

<style>
   .Header, .Footer{
   display:none !important;
   }
</style>

<style>
#mainNavigation { display: none }
 #preFooter { display: none }
 #secondaryNavigation { display: none }
 #header {display: none}
 .socialaccountlinks-v2-block {display: none} 
</style>

Hi @Jade-NZ

Like this?

.Mobile-bar {
                display: none !important;
}
.Footer {
                display: none !important;
}

Magne