i have big blank between my navigation bar and my content on the mobile version only

Site URL: https://oriole-cowbell-8s27.squarespace.com/

Password to access the website : sophrologie 

Hi, 

I have an issue with my mobile version. The laptop version has no display problem. 

On my mobile, 

The first page (welcome page) appears ok. But then, on each page i have a blank space between the navigation bar and my content (or image with the yellow line). 

I would like to reduce those blanks but i don't know how to do it. 

I have added thanks to tutorials those things in order to have a fix navigation bar, and that reduce when i scroll down, and parameters for my mobile. 

In CSS: 

.Header.Header--top {
  position: fixed;
  top: 0px;
  z-index:1000;
  width:98.6%;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.1)
}

.Intro {padding-top:100px;}
.Index {padding-top:150px;}
.Main {padding-top:100px;}
.Main.Main--page {padding-top:100px !important;}
.Main.Main--blog-item {padding-top:100px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Main.Main--page {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
}

In advanced parameters (code injection), header :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
 $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Header-inner').css('padding-top', '1px').css('padding-bottom', '1px').css('transition', '0.3s');
   } else {
     $('.Header-inner').css('padding-top', '').css('padding-bottom', '').css('transition', '0.3s');
   }
 });
  $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Header-branding-logo').css('width', '105px').css('transition', '0.3s');
   } else {
     $('.Header-branding-logo').css('width', '').css('transition', '0.3s');
   }
 });
      $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 1) {
     $('.Index').css('padding-top', '60px').css('transition', '0.3s');
   } else {
     $('.Index').css('padding-top', '').css('transition', '0.3s');
   }
 });
 </script>

If you can help me thanks a lot !!!!!

@ombelinedeb you can target this class to adjust the padding 

@media(max-width:767px) {

.Main-content {
padding-top: 0px;
}
}

Result: 

Thanks a lot 🙂 

It works for most of the page except blog and event.  do you have the clue ?

Ombeline