Adjusting header spacing on mobile view

Site URL: https://www.simonavisuals.com

Hey, 

I'm looking to reduce the spacing of my header/top menu site-wide on mobile only. I'm happy with how it looks on desktop but on mobile there's quite a large space between the header and the content of my pages. I've tried a handful of suggested custom CSS from people with similar issues but had no luck!

Any help would be greatly appreciated - thank you!

My testing

3 hours ago, bangank36 said:

Try in Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #page {
    margin-top: 0 !important;
  }

  .mobile-bar-wrapper .mobile-branding-wrapper{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .main-content .sqs-row > .col > .sqs-block-gallery {
    padding-top: 0 !important;
  }
}

Let me know how it works on your site

Absolutely perfect! Thank you so much Ba, your help is much appreciated.