Hiding Header and footer - Template impact

Hello,

how can i hide header and footer in the impact-template for mobile version?

I used this code and this works for desktop and tablet version, not mobile. Can you help me?

Markus

@mdufner

/* Hide on Entire Site */
@media screen and (max-width:640px) {
.Mobile-bar {
       display: none;
   }
footer.Footer {
       display: none !important;
   }
}
/* Hide on One Page */
/* First you need to find Page ID. See how to below */
@media screen and (max-width:640px) {
   body#collection-59dbc8046f4ca35190c95826 .Mobile-bar {
       display: none;
   }
   body#collection-59dbc8046f4ca35190c95826 footer.Footer {
       display: none !important;
   }
}

See how to find Page ID: https://beaverhero.com/squarespace-how-to/#HowtoFindPageID