Jump to content

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

Recommended Posts

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;
}
}
 

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.png.af3d1b40e587ccffb7d269c3546c9db8.png

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.