Too much white space above & below site header/banner on mobile

Site URL: https://synthesizer-broccoli-5mar.squarespace.com/

Hi. I've been struggling with too much white space above and below my site header when looking at it on a tablet (both landscape and portrait view). It's fine on my computer and mobile phone. I played around with padding values and margin values but had no luck. Any ideas? I feel like it must be a simple fix.  https://synthesizer-broccoli-5mar.squarespace.com    pw=McDonald123

Also, I wanted to mention that while I was working on the issue (for hours!) I cobbled together various code I found on this forum in an attempt to control the banner spacing on a phone and a tablet separately, and further, to control how the spacing would appear on each device in both portrait view and landscape view. I had some limited success. This type of more granular control might be something commonly done, I just couldn't find information about it. I pasted the code below to see if anyone has comments. Thank you!

@media only screen and (max-width: 480px) and (orientation:portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 180px !important;
}
} 
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 200px !important;
}
} 
@media only screen and (max-width: 480px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 230px !important;
}
}
 

31 minutes ago, SusanMac said:

Site URL: https://synthesizer-broccoli-5mar.squarespace.com/

Hi. I've been struggling with too much white space above and below my site header when looking at it on a tablet (both landscape and portrait view). It's fine on my computer and mobile phone. I played around with padding values and margin values but had no luck. Any ideas? I feel like it must be a simple fix.  https://synthesizer-broccoli-5mar.squarespace.com    pw=McDonald123

Also, I wanted to mention that while I was working on the issue (for hours!) I cobbled together various code I found on this forum in an attempt to control the banner spacing on a phone and a tablet separately, and further, to control how the spacing would appear on each device in both portrait view and landscape view. I had some limited success. This type of more granular control might be something commonly done, I just couldn't find information about it. I pasted the code below to see if anyone has comments. Thank you!

@media only screen and (max-width: 480px) and (orientation:portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 180px !important;
}
} 
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 200px !important;
}
} 
@media only screen and (max-width: 480px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 230px !important;
}
}
 

 

1. Do you mean reducing the header on ipad?

2. It seems that you 'd like to move the banner to the lower position than current one, doesn't it?

Screenshots of your issues could help us a lot to find the right solution

Your picture is exactly right! I'd like to move the logo closer to the announcement bar and also move the picture closer to the logo. Could the announcement bar be affecting this, sort of pushing everything down? Thanks for your help.

14 hours ago, SusanMac said:

Your picture is exactly right! I'd like to move the logo closer to the announcement bar and also move the picture closer to the logo. Could the announcement bar be affecting this, sort of pushing everything down? Thanks for your help.

Add to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.homepage article section:nth-child(2) {
    margin-top: 70px !important;
}
}

6 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.homepage article section:nth-child(2) {
    margin-top: 70px !important;
}
}

 

Hi Tuan, it didn't work for me 😞  I think that I must have some conflicting CSS. I'm pasting what i've got, if you don't mind having a look.

@media screen and (max-width:991px) and (min-width:768px) {
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.homepage article section:nth-child(2) {
    margin-top: 70px !important;
}
}.sqs-announcement-bar-close {display: none
}

.header-menu-nav-folder-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: start;
    flex-direction: column;
    top: 6px; /* Update this value to your need */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 768px) {
  .header .header-announcement-bar-wrapper {
      padding-bottom: 1;
  }  
}
@media only screen and (max-width: 480px) and (orientation:portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 180px !important;
}
} 
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 200px !important;
}
} 
@media only screen and (max-width: 480px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}

.sqs-announcement-bar-content {
    background-color: #16559c !important;
}

.sqs-block-horizontalrule {
   padding-top: 10px;
   padding-bottom: 5px;
}

.sqs-block.form-block .form-wrapper input[type=submit], {
color:white } 

.sqs-block.form-block .form-wrapper input[type=submit], 
.sqs-lightbox.form-lightbox
.form-wrapper input[type=submit] {
 display: block; background-color:hsl(212, 75%, 35%); 
}
 
.sqs-announcement-bar p strong {  color: rgb(181,230,29) !important;   }

p {
  margin-top: 5px !important; margin-bottom: 5px !important;
}
p2 {
  margin-top: 10px !important; margin-bottom: 10px !important;
}
h1 {
  margin-top: 0px !important; margin-bottom: 0px !important;
}
h2 {
  margin-top: -15px !important; margin-bottom: 0px !important;
}
h3 {
  margin-top: 13px !important; margin-bottom: 0px !important;
}
.user-accounts-link {
    display: none;
}

.header-menu-nav-item a {
    font-size: 16px;
}

user-accounts-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: white !important;
    font-size: 0 !important;
}

.user-accounts-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: white !important;
    font-size: 0 !important;
}

.CartTableRow-imageBg-97RUm {border: 1px solid hsl(220, 15%, 75%)}

.CartTable-subtotal-2nJjm {color:hsl(212, 75%, 35%)}

.checkout-button:hover {background-color:hsl(212, 75%, 35%)!important;opacity:100!important;}

.empty-message {
   visibility: hidden;
}
.empty-message:before {
   visibility: visible;
   content: "Your cart is currently empty.";
   font-size: 15px;
}

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 75%;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1587931238405_18169 {display: none;
}
  #block-yui_3_17_2_1_1588741876913_15084 {
width: 65%
}
  #block-yui_3_17_2_1_1571589838108_28063 
 .sqsrte-large {font-size: 15px;
  }
    #block-yui_3_17_2_1_1571622920306_21730 {
  width: 90%
  }
  
  #block-yui_3_17_2_1_1587824786630_13489 {display: none;
}
 #block-e48ef5e0dac4324ce0eb .sqsrte-large {font-size: 15px;
  }  
  #block-yui_3_17_2_1_1593978346414_18550  .sqsrte-large {font-size: 15px;
  }
  /* Insert Code for Mobile Above This Line */
}

/*

  begin mobile menu left flyout
  
  Version       : 0.3d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : uses LESS syntax
                  
                  the reveal menu items code supports up to 32 menu items in a
                  menu
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @flyout-transition-duration : 0.6s;
  
  /*
  
    should the menu close with the same effect or blink; it's gone?
    
    use false or true
    
    */
    
  @close-effect : true;
  
  // make close effect a little shorter than open
  
  @close-duration-shorten-by : 0.2s;
  
  /*
  
    reveal menu item by itself shows no visible effect. you have to use either
    a built-in reveal menu item effect or write a custom CSS effect
    
    */
    
  @reveal-menu-items : false;
  
  // begin ignored if @reveal-menu-items is false
  
    @reveal-menu-items-delay-step : 0.03s;
    
    @reveal-menu-items-effect-flyout : false;
    
    // end ignored if @reveal-menu-items is false
    
  // do not change anything below, there be the borg here
  
  // begin unset SS built-in menu effect
  
    @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px )
    
      {
      
        .header-menu {
        
          opacity : unset;
          
          -webkit-transition : unset;
          -o-transition : unset;
          transition : unset;
          
          visibility : unset;
          
          }
        }
        
    .header--menu-open .header-menu .header-menu-cta,
    .header-menu,
    .header-menu-cta,
    .header-menu-nav-item a,
    .header-menu-nav-list
    
      {
      
        opacity : unset;
        
        -webkit-transform : unset;
        -ms-transform : unset;
        transform : unset;
        
        -webkit-transition : unset;
        -o-transition : unset;
        transition : unset;
        
        visibility : unset;
        will-change : unset;
        
        }
        
    /* end unset SS built-in menu effect */
    
  // begin move menu off screen
  
    .header-menu {
    
      transition-property : transform;
      transform : translateX( -100% );
      will-change : transform;
      
      .close-effect ( @flyout-transition-duration, @close-duration-shorten-by );
      
      }
      
    .header-menu-nav-folder {
    
      transform : translateX( 200% );
      
      }
      
    // end move menu off screen
    
  // begin move menu on screen
  
    .header--menu-open .header-menu {
    
      @duration : @flyout-transition-duration;
      
      -webkit-transition-duration : @duration;
      -o-transition-duration : @duration;
      transition-duration : @duration;
      
      transition-timing-function : ease-out;
      transform : translateX( 0 );
      
      }
      
    .header-menu-nav-folder--active {
    
      transform : unset;
      
      }
      
    // end move menu on screen
    
  // close menu effect, optional
  
  .close-effect ( @duration, @offset ) when ( @close-effect = true ) {
  
    @d : round( @duration - @offset, 3 );
    
    -webkit-transition-duration : @d;
    -o-transition-duration : @d;
    transition-duration : @d;
    
    transition-timing-function : ease-in;
    
    }
    
  .reveal-menu-items ( @flyout-transition-duration,
  
    @reveal-menu-items-delay-step );
    
  // reveal menu items
  
  .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) {
  
    .reveal-menu-items-effect-flyout ( @flyout-transition-duration );
    
    // reveal menu items effect flyout
    
    .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) {
    
      // @reveal-menu-items = true, 
      
      .header-menu-nav-item {
      
        transform : translateX( -100% );
        transition-duration : @duration;
        
        }
        
      .header--menu-open .header-menu-nav-item {
      
        transform : translateX( 0 );
        
        }
      }
      
    @iterations : 32;
    
    .transition-delays ( @i ) when ( @i > 0 ) {
    
      .header-menu-nav-item:nth-child( @{i} ) {
      
        @d : round( @i * @step + ( @start / 2 ), 3 );
        
        transition-delay : @d;
        
        }
        
      .transition-delays ( @i - 1 );
      
      }
      
    .transition-delays ( @iterations );
    
    }
    
  // end mobile menu left flyout

On 11/7/2021 at 8:36 PM, SusanMac said:

Hi Tuan, it didn't work for me 😞  I think that I must have some conflicting CSS. I'm pasting what i've got, if you don't mind having a look.

@media screen and (max-width:991px) and (min-width:768px) {
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.homepage article section:nth-child(2) {
    margin-top: 70px !important;
}
}.sqs-announcement-bar-close {display: none
}

.header-menu-nav-folder-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: start;
    flex-direction: column;
    top: 6px; /* Update this value to your need */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 768px) {
  .header .header-announcement-bar-wrapper {
      padding-bottom: 1;
  }  
}
@media only screen and (max-width: 480px) and (orientation:portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 180px !important;
}
} 
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation: portrait) {
body.homepage article section:nth-child(2) {
    margin-top: 200px !important;
}
} 
@media only screen and (max-width: 480px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 768px) and (orientation:landscape) {
body.homepage article section:nth-child(2) {
    margin-top: 250px !important;
}
}

.sqs-announcement-bar-content {
    background-color: #16559c !important;
}

.sqs-block-horizontalrule {
   padding-top: 10px;
   padding-bottom: 5px;
}

.sqs-block.form-block .form-wrapper input[type=submit], {
color:white } 

.sqs-block.form-block .form-wrapper input[type=submit], 
.sqs-lightbox.form-lightbox
.form-wrapper input[type=submit] {
 display: block; background-color:hsl(212, 75%, 35%); 
}
 
.sqs-announcement-bar p strong {  color: rgb(181,230,29) !important;   }

p {
  margin-top: 5px !important; margin-bottom: 5px !important;
}
p2 {
  margin-top: 10px !important; margin-bottom: 10px !important;
}
h1 {
  margin-top: 0px !important; margin-bottom: 0px !important;
}
h2 {
  margin-top: -15px !important; margin-bottom: 0px !important;
}
h3 {
  margin-top: 13px !important; margin-bottom: 0px !important;
}
.user-accounts-link {
    display: none;
}

.header-menu-nav-item a {
    font-size: 16px;
}

user-accounts-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: white !important;
    font-size: 0 !important;
}

.user-accounts-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    color: white !important;
    font-size: 0 !important;
}

.CartTableRow-imageBg-97RUm {border: 1px solid hsl(220, 15%, 75%)}

.CartTable-subtotal-2nJjm {color:hsl(212, 75%, 35%)}

.checkout-button:hover {background-color:hsl(212, 75%, 35%)!important;opacity:100!important;}

.empty-message {
   visibility: hidden;
}
.empty-message:before {
   visibility: visible;
   content: "Your cart is currently empty.";
   font-size: 15px;
}

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 75%;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1587931238405_18169 {display: none;
}
  #block-yui_3_17_2_1_1588741876913_15084 {
width: 65%
}
  #block-yui_3_17_2_1_1571589838108_28063 
 .sqsrte-large {font-size: 15px;
  }
    #block-yui_3_17_2_1_1571622920306_21730 {
  width: 90%
  }
  
  #block-yui_3_17_2_1_1587824786630_13489 {display: none;
}
 #block-e48ef5e0dac4324ce0eb .sqsrte-large {font-size: 15px;
  }  
  #block-yui_3_17_2_1_1593978346414_18550  .sqsrte-large {font-size: 15px;
  }
  /* Insert Code for Mobile Above This Line */
}

/*

  begin mobile menu left flyout
  
  Version       : 0.3d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : uses LESS syntax
                  
                  the reveal menu items code supports up to 32 menu items in a
                  menu
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @flyout-transition-duration : 0.6s;
  
  /*
  
    should the menu close with the same effect or blink; it's gone?
    
    use false or true
    
    */
    
  @close-effect : true;
  
  // make close effect a little shorter than open
  
  @close-duration-shorten-by : 0.2s;
  
  /*
  
    reveal menu item by itself shows no visible effect. you have to use either
    a built-in reveal menu item effect or write a custom CSS effect
    
    */
    
  @reveal-menu-items : false;
  
  // begin ignored if @reveal-menu-items is false
  
    @reveal-menu-items-delay-step : 0.03s;
    
    @reveal-menu-items-effect-flyout : false;
    
    // end ignored if @reveal-menu-items is false
    
  // do not change anything below, there be the borg here
  
  // begin unset SS built-in menu effect
  
    @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px )
    
      {
      
        .header-menu {
        
          opacity : unset;
          
          -webkit-transition : unset;
          -o-transition : unset;
          transition : unset;
          
          visibility : unset;
          
          }
        }
        
    .header--menu-open .header-menu .header-menu-cta,
    .header-menu,
    .header-menu-cta,
    .header-menu-nav-item a,
    .header-menu-nav-list
    
      {
      
        opacity : unset;
        
        -webkit-transform : unset;
        -ms-transform : unset;
        transform : unset;
        
        -webkit-transition : unset;
        -o-transition : unset;
        transition : unset;
        
        visibility : unset;
        will-change : unset;
        
        }
        
    /* end unset SS built-in menu effect */
    
  // begin move menu off screen
  
    .header-menu {
    
      transition-property : transform;
      transform : translateX( -100% );
      will-change : transform;
      
      .close-effect ( @flyout-transition-duration, @close-duration-shorten-by );
      
      }
      
    .header-menu-nav-folder {
    
      transform : translateX( 200% );
      
      }
      
    // end move menu off screen
    
  // begin move menu on screen
  
    .header--menu-open .header-menu {
    
      @duration : @flyout-transition-duration;
      
      -webkit-transition-duration : @duration;
      -o-transition-duration : @duration;
      transition-duration : @duration;
      
      transition-timing-function : ease-out;
      transform : translateX( 0 );
      
      }
      
    .header-menu-nav-folder--active {
    
      transform : unset;
      
      }
      
    // end move menu on screen
    
  // close menu effect, optional
  
  .close-effect ( @duration, @offset ) when ( @close-effect = true ) {
  
    @d : round( @duration - @offset, 3 );
    
    -webkit-transition-duration : @d;
    -o-transition-duration : @d;
    transition-duration : @d;
    
    transition-timing-function : ease-in;
    
    }
    
  .reveal-menu-items ( @flyout-transition-duration,
  
    @reveal-menu-items-delay-step );
    
  // reveal menu items
  
  .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) {
  
    .reveal-menu-items-effect-flyout ( @flyout-transition-duration );
    
    // reveal menu items effect flyout
    
    .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) {
    
      // @reveal-menu-items = true, 
      
      .header-menu-nav-item {
      
        transform : translateX( -100% );
        transition-duration : @duration;
        
        }
        
      .header--menu-open .header-menu-nav-item {
      
        transform : translateX( 0 );
        
        }
      }
      
    @iterations : 32;
    
    .transition-delays ( @i ) when ( @i > 0 ) {
    
      .header-menu-nav-item:nth-child( @{i} ) {
      
        @d : round( @i * @step + ( @start / 2 ), 3 );
        
        transition-delay : @d;
        
        }
        
      .transition-delays ( @i - 1 );
      
      }
      
    .transition-delays ( @iterations );
    
    }
    
  // end mobile menu left flyout

Can you add & keep code I sent? I will try checking easier