How to hide Header on phone view?

Hello guys, 

I was able to hide my Header on desktop view with this CSS successfully, but phone view is still has a header, Do I need a different code to talk to phone view?
I use the Sofia template.

.Header {
    display: none !important;
}

Your guidelines is appreciated ❤️

Can you share site url? WE can check easier.

sure https://farhad.squarespace.com/

pass : 123

---

Aside from Phone view issue, I was wondering if there is any way to make an image shake, like the one here on this website : https://www.scs.stanford.edu/~dm/

thank you in advance tuanphan you are truly amazing and an inspiration  ❤️ 
I like your banner 🙂 those kids remind me of myself when an issue is solved 

Add to Home > Design > Custom CSS

/* Hide mobile header */
.Mobile-bar.Mobile-bar--top {
    display: none;
}

With images, you can use GIF or JavaScript, Java is complex.

Thank you angel

On 9/9/2020 at 11:46 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* Hide mobile header */
.Mobile-bar.Mobile-bar--top {
    display: none;
}

With images, you can use GIF or JavaScript, Java is complex.

This does not work.

14 hours ago, IdaJohansson said:

This does not work.

What is your site url?