Reducing padding (?) on mobile header

Site URL: http://touristtype.com

Hi guys, I'm wondering if there is a quick and easy way to reduce the bottom padding on on my header, specifically and only on the mobile version.

The spacing on the desktop version looks just fine, but when I switch between that and the mobile version, it's almost like the main content "jumps" down a small bit. I'll share an image here of what happens when I highlight my content in the Squarespace preview window, I assume the lower block is padding from the main content, which I think is fine, but there is also a larger padding or margin directly under the navigation that I think, if removed, would make it visually match the desktop version much better.

I'm working on the 7.1 "template". Thanks for your help!

8 hours ago, TouristType said:

Site URL: http://touristtype.com

Hi guys, I'm wondering if there is a quick and easy way to reduce the bottom padding on on my header, specifically and only on the mobile version.

The spacing on the desktop version looks just fine, but when I switch between that and the mobile version, it's almost like the main content "jumps" down a small bit. I'll share an image here of what happens when I highlight my content in the Squarespace preview window, I assume the lower block is padding from the main content, which I think is fine, but there is also a larger padding or margin directly under the navigation that I think, if removed, would make it visually match the desktop version much better.

I'm working on the 7.1 "template". Thanks for your help!

Try this in Design->Custom Css

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header .header-announcement-bar-wrapper {
      padding-bottom: 0;
  }  
}

@media screen and (max-width: 767px) {
  .sqs-layout .sqs-row .sqs-block:first-child {
      padding-top: 0 !important;
  }  
}

That worked great, thank you!