How Do I Remove Mystery White Space on Mobile? (Brine)

May 5, 2020

Site URL: https://www.bottlerocketrecording.co.uk/

I've recently redesigned my site – transferring from Pacific to Brine (in favor of more editing options). It's not been the smoothest of transitions and I've had to dip into CSS to facilitate what I'd thought were some pretty basic requirements. Anyway I'm pretty much there now apart from some frustrating glitches on mobile view, as explained below.

On mobile: The header at the top keeps mysteriously adding 8px + worth of padding to the top and bottom which is contributing to – if not wholly – causing it to obscure my section headings when using index scrolling from the hamburger menu. I've isolated the .mobile bar section and removed 8px with CSS but if you compare it to the desktop view there is clearly still more white space added around my branding box. Cosmetically – I'd obviously rather it were thinner but it's not that big a deal, but I do need it not to obscure my headings during scrolling, so it has to be fixed one way or another.

On Mobile, BLOG PAGE: There is another mystery white space between the "Notes from the Studio" intro Banner and the nav/branding bar at the top. I've tried reducing padding to that area using CSS and site styles. In most cases just causes the "notes from the Studio" banner to be chopped into. I've also tried that banner image in a number of different shapes and sizes and always get the same issue. Furthermore there have been many occasions where I seem to have fixed it – I go to my mobile device immediately after editing and it displays perfectly as as it should. Then then on reloading the page – the white space jumps back – almost saying "WAIT, I'M STILL HERE!, pushing the banner down again. This has been incredibly frustrating, especially when resizing and adjusting the padding to the "notes from ..." image block. In the section editor, Squarespace will show that I've solved the problem – everything looks fine – and then I open it on my actual phone and the white space is either still there or I've chopped the top or bottom off my banner. My only conclusion is there must be some rogue code somewhere that's over-riding everything or even a ghost block that can't be deleted that is pushing things to flow around it.

Hoping someone can shed some light!

Thanks!

tuanphan · June 22, 2020

Hi. Sorry for the late reply. Have you solved it yet?

June 22, 2020

Hi, no still a mystery. Do you think you can help?

June 23, 2020

Hi @tuanphan

Is there any extra information you need from me to help solve it?

Thanks,

Jonny

kaceelaine · July 8, 2020

Yes, I have a solution for this! I stumbled upon this same issue a while ago and it was driving me nuts. The following code seems to solve it for me...

I guess I should add that this has worked on 7.0, not sure about 7.1 version.

.Mobile-bar.Mobile-bar--bottom {
  padding: 0!important;
}

Thanks, Kacee

wheedesign · July 9, 2020

Hi!

I'm not too sure how this forum works, but wondering if you could help me as I have a similar problem on the Pacific template for mobile, does anyone have any suggestions for the code that I could use to get rid of the extra space, the code above deosn't seem to work? (in between the logo and the header 'Treatment menu')

Thanks

Kerry

shykoala4 · July 14, 2020

On 7/8/2020 at 12:23 AM, kaceelaine said:
Yes, I have a solution for this! I stumbled upon this same issue a while ago and it was driving me nuts. The following code seems to solve it for me...

I guess I should add that this has worked on 7.0, not sure about 7.1 version.
.Mobile-bar.Mobile-bar--bottom {
  padding: 0!important;
}
Thanks, Kacee

Hmm...this isn't working for me 😞

tuanphan · July 15, 2020

6 hours ago, shykoala4 said:

Hmm...this isn't working for me 😞

Can you share link to your site? We can check easier.

shykoala4 · July 23, 2020

Sure! Here's my website: www.joyindementia.com

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile.

See images below and attached.

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 *

Website: joyindementia.com

Thank you again for your help!

Laura

DESKTOP:

MOBILE:

rwp · July 23, 2020

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
  }

  #block-yui_3_17_2_1_1559189131342_7573 {
    padding: 0 !important;
  }
  
  #block-c6a5be37ddcf5791e077 {
    padding-top: 0 !important;
  }
  #biotease {
    margin-top: -17px;
  }
}

shykoala4 · July 27, 2020

On 7/22/2020 at 11:41 PM, rwp said:


@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
  }

  #block-yui_3_17_2_1_1559189131342_7573 {
    padding: 0 !important;
  }
  
  #block-c6a5be37ddcf5791e077 {
    padding-top: 0 !important;
  }
  #biotease {
    margin-top: -17px;
  }
}

This worked! Thank you so much!

curepetrini · February 1, 2021

Hi,

I'm struggling with this same issue on my home/index page. My page is also Brine Template (7.0) I've tried variations of codes but nothing works.

I have the white lines/sections that are in the mobile view but fine on desktop. Can anyone help plssssss..

The site is www.islandpops.com

tuanphan · February 3, 2021

On 1/31/2021 at 9:26 PM, curepetrini said:

Hi,

I'm struggling with this same issue on my home/index page. My page is also Brine Template (7.0) I've tried variations of codes but nothing works.

I have the white lines/sections that are in the mobile view but fine on desktop. Can anyone help plssssss..

The site is www.islandpops.com

Have you found the cause yet?

Bountie · June 8, 2021

Hi @tuanphan!

I have the same problem with a white mobile bar on 7.1 version.

See below :

Here is the link of the site : https://chimes-poodle-kggl.squarespace.com

Pass : Advantage-Club

Thanks for your help !

tuanphan · June 9, 2021

On 6/8/2021 at 7:16 PM, Bountie said:

Hi @tuanphan!

I have the same problem with a white mobile bar on 7.1 version.

See below :

Here is the link of the site : https://chimes-poodle-kggl.squarespace.com

Pass : Advantage-Club

Thanks for your help !

Hi. I think some code in Custom CSS caused this. Can you send all code in Custom CSS? We can check easier

Bountie · June 11, 2021

@tuanphan

Yes, here is the code :

@font-face {
font-family: 'VISBY ROUND-EXTRALIGHT';   src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023969059c4413e7bd043f0/1612945040963/VisbyRoundCF-ExtraLight.otf'); }
@font-face {
font-family: 'VISBY ROUND-BOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396775978d02d5a68b7a4/1612945015991/VisbyRoundCF-Bold.otf'); }
@font-face {
font-family: 'VISBY ROUND-DEMIBOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023967d38c26f75b327aa30/1612945021586/VisbyRoundCF-DemiBold.otf'); }
@font-face {
font-family: 'VISBY ROUND-EXTRABOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396847c69dd3140c0dba3/1612945028598/VisbyRoundCF-ExtraBold.otf'); }
@font-face {
font-family: 'VISBY ROUND-HEAVY';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396950fe39d0953e34ab7/1612945045474/VisbyRoundCF-Heavy.otf'); }
@font-face {
font-family: 'VISBY ROUND-MEDIUM';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396a10f4c2e17decdd3d4/1612945057197/VisbyRoundCF-Medium.otf'); }
@font-face {
font-family: 'VISBY ROUND';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396a5ce57f71da2e39880/1612945061311/VisbyRoundCF-Regular.otf'); }
@font-face {
font-family: 'VISBY ROUND-LIGHT';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023969929e1fd7f86b9103a/1612945049784/VisbyRoundCF-Light.otf'); }

@font-face{font-family: 'FUTURA PT-BOOK'; src: url(https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/608c08b4be495274e90bc713/1619790006541/FuturaPTBook.otfhttps://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/608c08b4be495274e90bc713/1619790006541/FuturaPTBook.otf);}
h1 {font-family: 'VISBY ROUND-EXTRABOLD';}
h2{font-family: 'VISBY ROUND-BOLD';
font-size: 45px;
color: #150d44}
h3{font-family: 'VISBY ROUND-DEMIBOLD';
font-size: 35px;
color: #392064}
h4{font-family: 'VISBY ROUND-DEMIBOLD';
font-size: 28px}
P{font-family: 'FUTURA PT-BOOK';
font-size: 19px;
letter-spacing: 1.2px}
.header-nav *, nav.header-menu-nav-list * {font-family: 'FUTURA PT-BOOK';
font-size: 17px!important}
body{font-family:'FUTURA PT-BOOK';}
.sqs-block-button-element{font-family:'FUTURA PT-BOOK';}
.sqs-block-button-element--small{font-family:'FUTURA PT-BOOK';
font-size: 14px}
.sqs-block-button-element--medium{font-family:'FUTURA PT-BOOK';
font-size: 17px;}

#block-yui_3_17_2_1_1615216068150_4627{
width: 30%!important;
margin: auto
}

#block-d3260bb304fe5638daf6{a{
background-image: none!important}}

//Footer//
#block-yui_3_17_2_1_1615216068150_4627{
margin-top: 10px!important;
margin-bottom: -40px!important
}

//Footer - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1615216068150_4627{
margin-top: -10px!important
}}

//Page contact//
#block-01151dfb59e51d142450{
h2{color: #392064!important}
P{ color: black!important}
}

//Page A Propos//
#block-yui_3_17_2_1_1620811928515_2052{
margin-top: 15px!important
}

//Page accueil//
#block-b229ca1031820ff0c4bd{
padding-bottom: 35px!important
}

#block-c11b50dded8f90432d67{
width: 80%!important;
margin: auto
}
#block-bb6cc394fe0ceafe740e{
width: 80%!important;
margin: auto
}

#block-6046340e624c2d61eddc9036{
margin-top: -20px!important
}

#block-yui_3_17_2_1_1617888438376_10832{
width: 80%!important;
margin: auto
}
#block-yui_3_17_2_1_1617888438376_16881{
width: 80%!important;
margin: auto
}
#block-yui_3_17_2_1_1617888438376_19509{
width: 80%!important;
margin: auto
}

//Page Accueil - Pictos//
#block-6046340e624c2d61eddc9036{
margin-bottom: 20px!important
}
#block-yui_3_17_2_1_1617888438376_10832{
width: 50%!important
}
#block-yui_3_17_2_1_1617888438376_16881{
width: 50%!important
}
#block-yui_3_17_2_1_1617888438376_19509{
width: 50%!important
}

//Page d'accueil pictos - Mobile//
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_10832{
width: 40%!important;
margin: auto!important
}}
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_16881{
width: 40%!important;
margin: auto!important
}}
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_19509{
width: 40%!important;
margin: auto!important
}}

@media only screen and (max-width: 767px){section[data-section-id="606ed708c78ae67810179722"]{
.sqs-block-button-element--medium{
font-size: 14px!important;
padding: 15px22px!important
}}}

//Header - Mobile//
@media only screen and (max-width: 767px){#collection-6022a9c3b4c7a71e827a6843 {
height: 600px!important
}}

//Font - Mobile//
@media only screen and (max-width: 640px){#collection-6022a9c3b4c7a71e827a6843{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-6023922d6edbf62a6348c6e7{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-602392d60fe39d0953e328cf{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-6023928a5978d02d5a688a70{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-602392f6281fba23d0a7e908{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}

//Page Accueil - Mobile//
@media only screen and (max-width: 640px) {#block-b229ca1031820ff0c4bd{
h1{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none;
}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617865830889_24576{
margin-bottom: 40px!important
}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617876577942_16104{
margin-top: -20px!important;
margin-bottom: 70px!important
}}

//Page Club//
#block-yui_3_17_2_1_1615218297935_7308{
margin-top: -30px!important
}
//Page Club - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1615218297935_7308{
margin-top: -20px!important;
margin-bottom: 30px!important;
}}
@media only screen and (max-width: 640px){section[data-section-id="602541990eaaac6d41986c47"]{
margin-top: 20px!important
}}

//Page Card//
#block-6ea2f9db33f00d98baaf{
margin-top: 40px!important
}
#block-yui_3_17_2_1_1613061427053_5520{
margin-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_11039{
margin-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_9543{
margint-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_5581{
margin-top: -5px!important
}
#block-9b43a806c192dac5dec4{
margin-bottom: 30px!important
}

#block-yui_3_17_2_1_1617893285946_24812{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_25944{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_30355{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_34739{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}

//Bouton page Card//
#block-yui_3_17_2_1_1617893285946_51051{
.sqs-block-button-element--small:hover {background-color: #141042!important;
color: white!important}}
#block-yui_3_17_2_1_1617893285946_51051{
.sqs-block-button-element--small {color: #141042!important;
border: 2px solid #141042!important}}

#block-yui_3_17_2_1_1617893285946_56396{.sqs-block-button-element--small:hover {background-color: #5d596a!important;
color: white!important}}
#block-yui_3_17_2_1_1617893285946_56396{
.sqs-block-button-element--small {color: #5d596a!important;
border: 2px solid #5d596a!important}}

#block-yui_3_17_2_1_1617893285946_60302{
.sqs-block-button-element--small:hover {background-color: #b1afb6!important;
color: white!important}
}
#block-yui_3_17_2_1_1617893285946_60302{
.sqs-block-button-element--small {color: #b1afb6!important;
border: 2px solid #b1afb6!important}}

//Supprimer décallage arrière plan//
@media only screen and (max-width: 640px){html, body {
overflow-x: hidden;
}}

//Carte Advantage Entreprise//
section[data-section-id="609250cf48253b2c2d2aab89"]{
.sqs-block-button-element:hover{
color: #5d596a!important
}}

section[data-section-id="607021392d09fc7af89b174d"]{
.sqs-block-button-element:hover {background-color: #5d596a!important;
    color: white!important}}
section[data-section-id="607021392d09fc7af89b174d"]{.sqs-block-button-element {
color: #5d596a!important;
    border: 2px solid #5d596a!important}}
section[data-section-id="607021392d09fc7af89b174d"]{.design-layout-poster .image-button:hover a{
background-color: #5d596a!important;
    color: white!important
}}
section[data-section-id="607021392d09fc7af89b174d"]{.design-layout-poster .image-button a{
color: #5d596a!important;
    border: 2px solid #5d596a!important;
padding: 12px22px!important
}}

//Carte Advantage Partenaires//
section[data-section-id="609252801d765c7d1c33d24b"]{
.sqs-block-button-element:hover{
color: #b1afb6!important
}}

section[data-section-id="6073f72a0d6e7a606fa84986"]{
.sqs-block-button-element:hover {background-color: #b1afb6!important;
    color: white!important
}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.sqs-block-button-element {
color: #b1afb6!important;
    border: 2px solid #b1afb6!important}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.design-layout-poster .image-button:hover a{
background-color: #b1afb6!important;
    color: white!important
}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.design-layout-poster .image-button a{
color: #b1afb6!important;
    border: 2px solid #b1afb6!important;
padding: 12px22px!important
}}

//Carte Advantage Basic//
section[data-section-id="606f1fe001566843877694b1"]{.design-layout-poster .image-button a{
padding: 12px22px!important
}}

//Carte Advantage Family//
section[data-section-id="60be0bcdf7cb6416cd09efab"]{.design-layout-poster .image-button a{
padding: 12px22px!important
}}

//Titre pages Cartes - Mobile//
@media only screen and (max-width: 640px){#block-62b8e624894b0280bcfd{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-606f24033ecb543cdfe9cd62{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617961265920_3266{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618212634773_3131{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-20a216f8c86e4e35aaf9{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618229856337_27149{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-fc4cb292155cebf0ee71{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-7ca016ada7c831626cbe{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-d3260bb304fe5638daf6{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-5c43ae8bbc8ee9ae5fc4{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-0286afc9a2ad2d774678{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-136f48ee71c40f88f71c{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-e2fd22d1f83f323b0b7d{
h2{font-size: 34px!important}
}}

//Carte partenaires - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618215734429_34316{
margin-bottom: 60px!important
}}

//Carte entreprise - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618211603686_13361{
margin-bottom: 60px!important
}}

//Carte family - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1623067273348_48313{
margin-bottom: 60px!important
}}

//Carte basic - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617895368880_18711{
margin-bottom: 60px!important
}}

//Page Contact - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1622807079534_4945{
margin-left: 0px!important
}}

tuanphan · June 12, 2021

22 hours ago, Bountie said:

@tuanphan

Yes, here is the code :

@font-face {
font-family: 'VISBY ROUND-EXTRALIGHT';   src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023969059c4413e7bd043f0/1612945040963/VisbyRoundCF-ExtraLight.otf'); }
@font-face {
font-family: 'VISBY ROUND-BOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396775978d02d5a68b7a4/1612945015991/VisbyRoundCF-Bold.otf'); }
@font-face {
font-family: 'VISBY ROUND-DEMIBOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023967d38c26f75b327aa30/1612945021586/VisbyRoundCF-DemiBold.otf'); }
@font-face {
font-family: 'VISBY ROUND-EXTRABOLD';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396847c69dd3140c0dba3/1612945028598/VisbyRoundCF-ExtraBold.otf'); }
@font-face {
font-family: 'VISBY ROUND-HEAVY';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396950fe39d0953e34ab7/1612945045474/VisbyRoundCF-Heavy.otf'); }
@font-face {
font-family: 'VISBY ROUND-MEDIUM';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396a10f4c2e17decdd3d4/1612945057197/VisbyRoundCF-Medium.otf'); }
@font-face {
font-family: 'VISBY ROUND';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/602396a5ce57f71da2e39880/1612945061311/VisbyRoundCF-Regular.otf'); }
@font-face {
font-family: 'VISBY ROUND-LIGHT';
src: url('https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/6023969929e1fd7f86b9103a/1612945049784/VisbyRoundCF-Light.otf'); }

@font-face{font-family: 'FUTURA PT-BOOK'; src: url(https://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/608c08b4be495274e90bc713/1619790006541/FuturaPTBook.otfhttps://static1.squarespace.com/static/6022a9727b2b511dd3f2e584/t/608c08b4be495274e90bc713/1619790006541/FuturaPTBook.otf);}
h1 {font-family: 'VISBY ROUND-EXTRABOLD';}
h2{font-family: 'VISBY ROUND-BOLD';
font-size: 45px;
color: #150d44}
h3{font-family: 'VISBY ROUND-DEMIBOLD';
font-size: 35px;
color: #392064}
h4{font-family: 'VISBY ROUND-DEMIBOLD';
font-size: 28px}
P{font-family: 'FUTURA PT-BOOK';
font-size: 19px;
letter-spacing: 1.2px}
.header-nav *, nav.header-menu-nav-list * {font-family: 'FUTURA PT-BOOK';
font-size: 17px!important}
body{font-family:'FUTURA PT-BOOK';}
.sqs-block-button-element{font-family:'FUTURA PT-BOOK';}
.sqs-block-button-element--small{font-family:'FUTURA PT-BOOK';
font-size: 14px}
.sqs-block-button-element--medium{font-family:'FUTURA PT-BOOK';
font-size: 17px;}

#block-yui_3_17_2_1_1615216068150_4627{
width: 30%!important;
margin: auto
}

#block-d3260bb304fe5638daf6{a{
background-image: none!important}}

//Footer//
#block-yui_3_17_2_1_1615216068150_4627{
margin-top: 10px!important;
margin-bottom: -40px!important
}

//Footer - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1615216068150_4627{
margin-top: -10px!important
}}

//Page contact//
#block-01151dfb59e51d142450{
h2{color: #392064!important}
P{ color: black!important}
}

//Page A Propos//
#block-yui_3_17_2_1_1620811928515_2052{
margin-top: 15px!important
}

//Page accueil//
#block-b229ca1031820ff0c4bd{
padding-bottom: 35px!important
}

#block-c11b50dded8f90432d67{
width: 80%!important;
margin: auto
}
#block-bb6cc394fe0ceafe740e{
width: 80%!important;
margin: auto
}

#block-6046340e624c2d61eddc9036{
margin-top: -20px!important
}

#block-yui_3_17_2_1_1617888438376_10832{
width: 80%!important;
margin: auto
}
#block-yui_3_17_2_1_1617888438376_16881{
width: 80%!important;
margin: auto
}
#block-yui_3_17_2_1_1617888438376_19509{
width: 80%!important;
margin: auto
}

//Page Accueil - Pictos//
#block-6046340e624c2d61eddc9036{
margin-bottom: 20px!important
}
#block-yui_3_17_2_1_1617888438376_10832{
width: 50%!important
}
#block-yui_3_17_2_1_1617888438376_16881{
width: 50%!important
}
#block-yui_3_17_2_1_1617888438376_19509{
width: 50%!important
}

//Page d'accueil pictos - Mobile//
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_10832{
width: 40%!important;
margin: auto!important
}}
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_16881{
width: 40%!important;
margin: auto!important
}}
@media only screen and (max-width: 767px){#block-yui_3_17_2_1_1617888438376_19509{
width: 40%!important;
margin: auto!important
}}

@media only screen and (max-width: 767px){section[data-section-id="606ed708c78ae67810179722"]{
.sqs-block-button-element--medium{
font-size: 14px!important;
padding: 15px22px!important
}}}

//Header - Mobile//
@media only screen and (max-width: 767px){#collection-6022a9c3b4c7a71e827a6843 {
height: 600px!important
}}

//Font - Mobile//
@media only screen and (max-width: 640px){#collection-6022a9c3b4c7a71e827a6843{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-6023922d6edbf62a6348c6e7{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-602392d60fe39d0953e328cf{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-6023928a5978d02d5a688a70{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}
@media only screen and (max-width: 640px){#collection-602392f6281fba23d0a7e908{
h1{font-size: 36px!important}
   h2{font-size: 34px!important}
h3{font-size: 32px!important}
}}

//Page Accueil - Mobile//
@media only screen and (max-width: 640px) {#block-b229ca1031820ff0c4bd{
h1{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none;
}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617865830889_24576{
margin-bottom: 40px!important
}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617876577942_16104{
margin-top: -20px!important;
margin-bottom: 70px!important
}}

//Page Club//
#block-yui_3_17_2_1_1615218297935_7308{
margin-top: -30px!important
}
//Page Club - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1615218297935_7308{
margin-top: -20px!important;
margin-bottom: 30px!important;
}}
@media only screen and (max-width: 640px){section[data-section-id="602541990eaaac6d41986c47"]{
margin-top: 20px!important
}}

//Page Card//
#block-6ea2f9db33f00d98baaf{
margin-top: 40px!important
}
#block-yui_3_17_2_1_1613061427053_5520{
margin-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_11039{
margin-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_9543{
margint-top: -10px!important;
margin-bottom: -30px!important
}
#block-yui_3_17_2_1_1613061427053_5581{
margin-top: -5px!important
}
#block-9b43a806c192dac5dec4{
margin-bottom: 30px!important
}

#block-yui_3_17_2_1_1617893285946_24812{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_25944{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_30355{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}
#block-yui_3_17_2_1_1617893285946_34739{
h4{
    word-wrap: normal;
   -webkit-hyphens: none;
      -moz-hyphens: none;
           hyphens: none!important}}

//Bouton page Card//
#block-yui_3_17_2_1_1617893285946_51051{
.sqs-block-button-element--small:hover {background-color: #141042!important;
    color: white!important}}
#block-yui_3_17_2_1_1617893285946_51051{
.sqs-block-button-element--small {color: #141042!important;
    border: 2px solid #141042!important}}

#block-yui_3_17_2_1_1617893285946_56396{.sqs-block-button-element--small:hover {background-color: #5d596a!important;
    color: white!important}}
#block-yui_3_17_2_1_1617893285946_56396{
.sqs-block-button-element--small {color: #5d596a!important;
    border: 2px solid #5d596a!important}}

#block-yui_3_17_2_1_1617893285946_60302{
.sqs-block-button-element--small:hover {background-color: #b1afb6!important;
    color: white!important}
}
#block-yui_3_17_2_1_1617893285946_60302{
.sqs-block-button-element--small {color: #b1afb6!important;
    border: 2px solid #b1afb6!important}}

//Supprimer décallage arrière plan//
@media only screen and (max-width: 640px){html, body {
    overflow-x: hidden;
}}

//Carte Advantage Entreprise//
section[data-section-id="609250cf48253b2c2d2aab89"]{
.sqs-block-button-element:hover{
    color: #5d596a!important
}}

section[data-section-id="607021392d09fc7af89b174d"]{
.sqs-block-button-element:hover {background-color: #5d596a!important;
    color: white!important}}
section[data-section-id="607021392d09fc7af89b174d"]{.sqs-block-button-element {
color: #5d596a!important;
    border: 2px solid #5d596a!important}}
section[data-section-id="607021392d09fc7af89b174d"]{.design-layout-poster .image-button:hover a{
background-color: #5d596a!important;
    color: white!important
}}
section[data-section-id="607021392d09fc7af89b174d"]{.design-layout-poster .image-button a{
color: #5d596a!important;
    border: 2px solid #5d596a!important;
padding: 12px22px!important
}}

//Carte Advantage Partenaires//
section[data-section-id="609252801d765c7d1c33d24b"]{
.sqs-block-button-element:hover{
    color: #b1afb6!important
}}

section[data-section-id="6073f72a0d6e7a606fa84986"]{
.sqs-block-button-element:hover {background-color: #b1afb6!important;
    color: white!important
}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.sqs-block-button-element {
color: #b1afb6!important;
    border: 2px solid #b1afb6!important}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.design-layout-poster .image-button:hover a{
background-color: #b1afb6!important;
    color: white!important
}}
section[data-section-id="6073f72a0d6e7a606fa84986"]{.design-layout-poster .image-button a{
color: #b1afb6!important;
    border: 2px solid #b1afb6!important;
padding: 12px22px!important
}}

//Carte Advantage Basic//
section[data-section-id="606f1fe001566843877694b1"]{.design-layout-poster .image-button a{
padding: 12px22px!important
}}

//Carte Advantage Family//
section[data-section-id="60be0bcdf7cb6416cd09efab"]{.design-layout-poster .image-button a{
padding: 12px22px!important
}}

//Titre pages Cartes - Mobile//
@media only screen and (max-width: 640px){#block-62b8e624894b0280bcfd{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-606f24033ecb543cdfe9cd62{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617961265920_3266{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618212634773_3131{
h2{font-size: 34px!important}}}
@media only screen and (max-width: 640px){#block-20a216f8c86e4e35aaf9{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618229856337_27149{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-fc4cb292155cebf0ee71{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-7ca016ada7c831626cbe{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-d3260bb304fe5638daf6{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-5c43ae8bbc8ee9ae5fc4{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-0286afc9a2ad2d774678{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-136f48ee71c40f88f71c{
h2{font-size: 34px!important}
}}
@media only screen and (max-width: 640px){#block-e2fd22d1f83f323b0b7d{
h2{font-size: 34px!important}
}}

//Carte partenaires - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618215734429_34316{
margin-bottom: 60px!important
}}

//Carte entreprise - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1618211603686_13361{
margin-bottom: 60px!important
}}

//Carte family - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1623067273348_48313{
margin-bottom: 60px!important
}}

//Carte basic - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1617895368880_18711{
margin-bottom: 60px!important
}}

//Page Contact - Mobile//
@media only screen and (max-width: 640px){#block-yui_3_17_2_1_1622807079534_4945{
margin-left: 0px!important
}}

Try remove this code

@media only screen and (max-width: 640px) {
    html,body {
        overflow-x:hidden;
    }
}

Bountie · June 16, 2021

On 6/12/2021 at 8:58 AM, tuanphan said:
Try remove this code
@media only screen and (max-width: 640px) {
    html,body {
        overflow-x:hidden;
    }
}

Thank you, it worked!

hiface · June 16, 2021

For Squarespace to say that their sites are responsive 'out of the box' is a bit of a stretch - given the prevalence of vertical white space issues on mobile - like the space above Gallery sections in v7.1 for example.

gowlandllc · July 22, 2021

@tuanphan

Having a similar issue on the mobile version of my website.

Website: https://www.leliagowland.com/

Issue: Seems to only occur/appear when you click the menu on mobile view. For example, select "Negotiation", the "Back" is partially covered by a white bar / white padding. See attached image.

Template: Impact

Below is the coding featured on the website. Wondering if part of the code is the issue.

.sqs-block {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 5px;
}

.quote-block figure {background-color:#FFFFFF!important;padding-left:20px;padding-right:20px;
text-align:left; padding-bottom:20px; padding-top: 20px; color:
#3a7085!important; border-left:0px solid #a2dbd5} .sqs-block-quote .source
{color:#69c6bc!important; text-align:left; text-transform: none; font-size:
16px!important; letter-spacing:.01em;} .quote-block blockquote>span:first-child {
display:none; } .quote-block blockquote>span:first-child, .quote-block

blockquote>span:last-child { display:none;}

.form-wrapper .field-list .field .option {
font-size: 18px;
}

.form-wrapper .field-list .field .caption {
/* Captions of fields (eg First Name, Last Name) */
font-size: 12pt;}

.form-wrapper .field-list .field .description {
/* Captions of fields (eg First Name, Last Name) */
font-size: 12pt;}

/* media query for mobile devices */
@media screen and (max-width: 767px) {
.section-background img { opacity:0!important }
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#community img {
display: none;
}

#community .sqs-block-image img {
display: block;
}

#community {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626975081705-D6HDCHTH5CQG74MP9MN2/Screen+Shot+2021-07-22+at+12.30.07+PM.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-yui_3_17_2_1_1615427112071_10056 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#about-hello-banner img {
display: none;
}

#about-hello-banner .sqs-block-image img {
display: block;
}

#about-hello-banner {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984084837-L19Y9MP79D33NIPX9LU1/About+Me+Banner+for+Iphone.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-4bc77d52fcdd94f2f9e3 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#new-orleans-keynote-speaker img {
display: none;
}

#new-orleans-keynote-speaker .sqs-block-image img {
display: block;
}

#new-orleans-keynote-speaker {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984736429-ALJZEJX4S0AI9IB56FDB/Live%2BHyrbid%2BKeynote%2BSpeaker%2BPage%2BBanner%2Bfor%2BIphone.jpg?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-yui_3_17_2_1_1622651291542_2312 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#negotiation-course-1 img {
display: none;
}

#negotiation-course-1 .sqs-block-image img {
display: block;
}

#negotiation-course-1 {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984644358-FX29OXTCL6SJJDLMUX42/Course+Banner+for+Iphone.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-89f71f8f776a50a74852 {
display: none;
}
}

tuanphan · July 23, 2021

10 hours ago, gowlandllc said:

@tuanphan

Having a similar issue on the mobile version of my website.

Website: https://www.leliagowland.com/

Issue: Seems to only occur/appear when you click the menu on mobile view. For example, select "Negotiation", the "Back" is partially covered by a white bar / white padding. See attached image.

Template: Impact

Below is the coding featured on the website. Wondering if part of the code is the issue.

.sqs-block {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 5px;
}

.quote-block figure {background-color:#FFFFFF!important;padding-left:20px;padding-right:20px;
text-align:left; padding-bottom:20px; padding-top: 20px; color:
#3a7085!important; border-left:0px solid #a2dbd5} .sqs-block-quote .source
{color:#69c6bc!important; text-align:left; text-transform: none; font-size:
16px!important; letter-spacing:.01em;} .quote-block blockquote>span:first-child {
display:none; } .quote-block blockquote>span:first-child, .quote-block

blockquote>span:last-child { display:none;}

.form-wrapper .field-list .field .option {
font-size: 18px;
}

.form-wrapper .field-list .field .caption {
/* Captions of fields (eg First Name, Last Name) */
font-size: 12pt;}

.form-wrapper .field-list .field .description {
/* Captions of fields (eg First Name, Last Name) */
font-size: 12pt;}

/* media query for mobile devices */
@media screen and (max-width: 767px) {
.section-background img { opacity:0!important }
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#community img {
display: none;
}

#community .sqs-block-image img {
display: block;
}

#community {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626975081705-D6HDCHTH5CQG74MP9MN2/Screen+Shot+2021-07-22+at+12.30.07+PM.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-yui_3_17_2_1_1615427112071_10056 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#about-hello-banner img {
display: none;
}

#about-hello-banner .sqs-block-image img {
display: block;
}

#about-hello-banner {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984084837-L19Y9MP79D33NIPX9LU1/About+Me+Banner+for+Iphone.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-4bc77d52fcdd94f2f9e3 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#new-orleans-keynote-speaker img {
display: none;
}

#new-orleans-keynote-speaker .sqs-block-image img {
display: block;
}

#new-orleans-keynote-speaker {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984736429-ALJZEJX4S0AI9IB56FDB/Live%2BHyrbid%2BKeynote%2BSpeaker%2BPage%2BBanner%2Bfor%2BIphone.jpg?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-yui_3_17_2_1_1622651291542_2312 {
display: none;
}
}

/* media query for mobile devices */
@media screen and (max-width:767px) {
#negotiation-course-1 img {
display: none;
}

#negotiation-course-1 .sqs-block-image img {
display: block;
}

#negotiation-course-1 {
background: url('https://images.squarespace-cdn.com/content/v1/601d6665cf873d77e08b1245/1626984644358-FX29OXTCL6SJJDLMUX42/Course+Banner+for+Iphone.png?format=2500w');
background-repeat: no-repeat;
background-size: 100%;
}
}

@media screen and (max-width: 767px) {
#block-89f71f8f776a50a74852 {
display: none;
}
}

Hi. Which mobile/browser do you use? Looks fine on my phone

gowlandllc · July 23, 2021

17 hours ago, tuanphan said:

Hi. Which mobile/browser do you use? Looks fine on my phone

Both times we've seen it has been while using Safari. And it only appears when you click the menu/nav bar and select click one of the headings like "About" "Coaching" or "Writing" @tuanphan