Jump to content

White bar on bottom of mobile screen

By _eskaywhy, in Customize with code

Recommended Posts

_eskaywhy Level 1

_eskaywhy

Posted
Posted

Site URL: http://digitaljune.co

Hi there, I need some help! I am noticing a white bar on the bottom of the screen when on my phone. I can't seem to find the code causing it. Here is my css for the page- hopefully someone can help! Thank you!!

 

//SITEWIDE// 
/*MARGINS*/


/*REMOVE HYPHENS */
p, h1, h2, h3 {
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important; -ms-hyphens: manual !important;
   hyphens: manual !important; 
}
/*END REMOVE HYPHENS*/


/*MEDIA SCREEN SIZE FONTS */

@media only screen and (max-width: 640px) {h1 {font-size:1.75rem!important}}

@media only screen and (max-width: 640px) {h3 {font-size:1.2rem!important}}

@media only screen and (max-width: 640px) {h2 {font-size:1.25rem!important}}

@media only screen and (max-width: 640px) {p {font-size:.85rem!important}}

@media only screen and (min-width: 640px) {p {font-size:.8rem!important}}

@media only screen and (min-width: 640px) {h2 {font-size:1.6rem!important}}

/*END FONT SIZING*/


//END SITEWIDE//


//WELCOME//


.collection-type-index #welcome {background: #ffffff}

/*CENTER CONTENT*/

@media screen and (min-width: 640px) {
  #welcome .sqs-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
  }}

#welcome {.Index-page-content {
  padding-bottom: 20px;
  }}


//END WELCOME//

//WHAT WE DO//

.collection-type-index #what-we-do
{background: #ffffff} 

#what-we-do {
  .sqs-row {display:block;
      margin:0 auto;
    justify-content:center;

      .sqs-block-content {
        border: 1px solid #000000;}}
}


.image-title p {font-size:28px!important
}

#what-we-do {.Index-page-content {
padding-top: 20px;
  }}

//END WHAT WE DO//


//MEET SKYLAR//
/*CENTER CONTENT*/
@media screen and (min-width: 640px) {
  #meet-skylar .sqs-row {
    display: flex;
    align-items: center;
  box-sizing: border-box;
    justify-content: center;
    
    .image-block-outer-wrapper
   {
  border: 1px solid #000000;}} }

.collection-type-index #meet-skylar {background: #2C3A2F}

#meet-skylar p, #meet-skylar h1, #meet-skylar h3, {
  color: #ffffff}


//END SKYLAR//

//CLIENT KUDOS//
#client-testimonies {  
  .Index-page-content {
    padding-top: 30px;
    padding-bottom: 30px;
    border: 1px solid #000000;}}


  //END CLIENT KUDOS//


//SERVICES PAGE//

//BRAND EXPERIENCE//
#brand-experience
{background: #ffffff;}


//END BRAND EXPERIENCE//

//READY TO WORK//


#ready-to-work .sqs-row {margin-right:90px; margin-left:90px;}

#ready-to-work {border: 1px solid #000000;} 

/*responsive*/
@media only screen and (max-width:900px) {
  #ready-to-work .Index-page-content {margin-right:-150px!important; margin-left:-150px!important;  }}  

@media only screen and (max-width:900px) {
  #block-yui_3_17_2_1_1624918466613_23255 h1 {font-size:1.8rem!important;
  margin-right:60px;
  margin-left:60px;}}


//END READY TO WORK//

//PROCESS//
.collection-type-index #the-process {background: #2C3A2F;}
#the-process p, #the-process h1, #the-process h3, #the-process h2,{
  color: #ffffff}


@media only screen and (max-width: 680px) {#block-yui_3_17_2_1_1625774643009_12101, #block-yui_3_17_2_1_1625790998915_7975, #block-yui_3_17_2_1_1625774643009_23288,#block-yui_3_17_2_1_1625774643009_25877    { display: inline-block;
  margin-left: 0em;} } 
  

//END PROCESS//

//SERVICES CTA//


#services-contact {  
  .Index-page-content {
    border: 1px solid #000000;}}
  
  #block-yui_3_17_2_1_1624941747867_2169 h1, #block-yui_3_17_2_1_1624941747867_2169 P {
color: #ffffff !important;
}

//END SERVICES CTA//


//ADDITIONAL SERVICES//

@media only screen and (max-width: 680px){ 
#block-e0d515e543578b6755fd{
  margin-top:10px} }

@media only screen and (max-width: 680px){ 
#block-c98786ccd739fed358d1 {
  margin-top:40px} }

//END ADDITIONAL SERVICES//


//CONTACT PAGE//


#contact {background: #ffffff;}
#faq {background:#2C3A2F}

#faq p, #faq h1, #faq h3, {
  color: #ffffff}

//END CONTACT PAGE//


//FOOTERS//


#block-yui_3_17_2_1_1625761320618_13523 
.vertical-line {
  align-items:center;
  width:1px;
  height: 200px;  
  background: black;
  position:middle;

  }

@media only screen and (min-width: 740px) {
#footerBlocksTop .sqs-row {
  display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
  } } 

//center vertical mobile//


@media only screen and (max-width: 768px) {
 #block-yui_3_17_2_1_1625761320618_13523 {
   display: none;
 }
}
    @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1625779615117_55394, #block-yui_3_17_2_1_1625779615117_53182, {
display:column;
  text-align:center;}}

//center tablet and bigger//
@media only screen and (min-width: 740px) { #footerBlocksTop {
margin-right: -10px;
  margin-left: -10px;
 } }

//text mobile//
@media only screen and (max-width: 800px){ #block-yui_3_17_2_1_1625758746822_50841, { h3 {font-size:1rem!important}}}

//mobile & tablet links//
@media only screen and (max-width: 1000px){ #block-yui_3_17_2_1_1625779615117_53182, #block-yui_3_17_2_1_1625779615117_55394 { h3 {font-size:1rem!important;}}}

//text tablet//
@media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1625758746822_50841{ h3 {font-size:1.25rem!important}}}


#block-yui_3_17_2_1_1625758746822_50841 h3 {font-size:24px;
}


/*bring links closer and apart*/
#block-yui_3_17_2_1_1625779615117_55394 {
  margin-top: -15px;} 

#block-yui_3_17_2_1_1625779615117_53182 {
   margin-top: -15px;} 

#block-yui_3_17_2_1_1625758746822_50841{
  margin-top:10px;
}

/*hide footers*/
#footerBlocksMiddle {
  display: none!important; }
#footerBlocksBottom {
  display: none!important; }

/*remove underline link*/
#footerBlocksTop a {
    border-bottom:none!important;
}

/*BORDER*/
.Footer {border: 1px solid #000000;} 

//END FOOTER//

Link to comment
  • Replies 2
  • Views 697
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan Level 17

tuanphan

Posted
Posted
On 7/9/2021 at 8:54 AM, _eskaywhy said:

Site URL: http://digitaljune.co

Hi there, I need some help! I am noticing a white bar on the bottom of the screen when on my phone. I can't seem to find the code causing it. Here is my css for the page- hopefully someone can help! Thank you!!

 

//SITEWIDE// 
/*MARGINS*/


/*REMOVE HYPHENS */
p, h1, h2, h3 {
   -webkit-hyphens: manual !important;
   -moz-hyphens: manual !important; -ms-hyphens: manual !important;
   hyphens: manual !important; 
}
/*END REMOVE HYPHENS*/


/*MEDIA SCREEN SIZE FONTS */

@media only screen and (max-width: 640px) {h1 {font-size:1.75rem!important}}

@media only screen and (max-width: 640px) {h3 {font-size:1.2rem!important}}

@media only screen and (max-width: 640px) {h2 {font-size:1.25rem!important}}

@media only screen and (max-width: 640px) {p {font-size:.85rem!important}}

@media only screen and (min-width: 640px) {p {font-size:.8rem!important}}

@media only screen and (min-width: 640px) {h2 {font-size:1.6rem!important}}

/*END FONT SIZING*/


//END SITEWIDE//


//WELCOME//


.collection-type-index #welcome {background: #ffffff}

/*CENTER CONTENT*/

@media screen and (min-width: 640px) {
  #welcome .sqs-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
  }}

#welcome {.Index-page-content {
  padding-bottom: 20px;
  }}


//END WELCOME//

//WHAT WE DO//

.collection-type-index #what-we-do
{background: #ffffff} 

#what-we-do {
  .sqs-row {display:block;
      margin:0 auto;
    justify-content:center;

      .sqs-block-content {
        border: 1px solid #000000;}}
}


.image-title p {font-size:28px!important
}

#what-we-do {.Index-page-content {
padding-top: 20px;
  }}

//END WHAT WE DO//


//MEET SKYLAR//
/*CENTER CONTENT*/
@media screen and (min-width: 640px) {
  #meet-skylar .sqs-row {
    display: flex;
    align-items: center;
  box-sizing: border-box;
    justify-content: center;
    
    .image-block-outer-wrapper
   {
  border: 1px solid #000000;}} }

.collection-type-index #meet-skylar {background: #2C3A2F}

#meet-skylar p, #meet-skylar h1, #meet-skylar h3, {
  color: #ffffff}


//END SKYLAR//

//CLIENT KUDOS//
#client-testimonies {  
  .Index-page-content {
    padding-top: 30px;
    padding-bottom: 30px;
    border: 1px solid #000000;}}


  //END CLIENT KUDOS//


//SERVICES PAGE//

//BRAND EXPERIENCE//
#brand-experience
{background: #ffffff;}


//END BRAND EXPERIENCE//

//READY TO WORK//


#ready-to-work .sqs-row {margin-right:90px; margin-left:90px;}

#ready-to-work {border: 1px solid #000000;} 

/*responsive*/
@media only screen and (max-width:900px) {
  #ready-to-work .Index-page-content {margin-right:-150px!important; margin-left:-150px!important;  }}  

@media only screen and (max-width:900px) {
  #block-yui_3_17_2_1_1624918466613_23255 h1 {font-size:1.8rem!important;
  margin-right:60px;
  margin-left:60px;}}


//END READY TO WORK//

//PROCESS//
.collection-type-index #the-process {background: #2C3A2F;}
#the-process p, #the-process h1, #the-process h3, #the-process h2,{
  color: #ffffff}


@media only screen and (max-width: 680px) {#block-yui_3_17_2_1_1625774643009_12101, #block-yui_3_17_2_1_1625790998915_7975, #block-yui_3_17_2_1_1625774643009_23288,#block-yui_3_17_2_1_1625774643009_25877    { display: inline-block;
  margin-left: 0em;} } 
  

//END PROCESS//

//SERVICES CTA//


#services-contact {  
  .Index-page-content {
    border: 1px solid #000000;}}
  
  #block-yui_3_17_2_1_1624941747867_2169 h1, #block-yui_3_17_2_1_1624941747867_2169 P {
color: #ffffff !important;
}

//END SERVICES CTA//


//ADDITIONAL SERVICES//

@media only screen and (max-width: 680px){ 
#block-e0d515e543578b6755fd{
  margin-top:10px} }

@media only screen and (max-width: 680px){ 
#block-c98786ccd739fed358d1 {
  margin-top:40px} }

//END ADDITIONAL SERVICES//


//CONTACT PAGE//


#contact {background: #ffffff;}
#faq {background:#2C3A2F}

#faq p, #faq h1, #faq h3, {
  color: #ffffff}

//END CONTACT PAGE//


//FOOTERS//


#block-yui_3_17_2_1_1625761320618_13523 
.vertical-line {
  align-items:center;
  width:1px;
  height: 200px;  
  background: black;
  position:middle;

  }

@media only screen and (min-width: 740px) {
#footerBlocksTop .sqs-row {
  display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
  } } 

//center vertical mobile//


@media only screen and (max-width: 768px) {
 #block-yui_3_17_2_1_1625761320618_13523 {
   display: none;
 }
}
    @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1625779615117_55394, #block-yui_3_17_2_1_1625779615117_53182, {
display:column;
  text-align:center;}}

//center tablet and bigger//
@media only screen and (min-width: 740px) { #footerBlocksTop {
margin-right: -10px;
  margin-left: -10px;
 } }

//text mobile//
@media only screen and (max-width: 800px){ #block-yui_3_17_2_1_1625758746822_50841, { h3 {font-size:1rem!important}}}

//mobile & tablet links//
@media only screen and (max-width: 1000px){ #block-yui_3_17_2_1_1625779615117_53182, #block-yui_3_17_2_1_1625779615117_55394 { h3 {font-size:1rem!important;}}}

//text tablet//
@media only screen and (min-width: 640px){ #block-yui_3_17_2_1_1625758746822_50841{ h3 {font-size:1.25rem!important}}}


#block-yui_3_17_2_1_1625758746822_50841 h3 {font-size:24px;
}


/*bring links closer and apart*/
#block-yui_3_17_2_1_1625779615117_55394 {
  margin-top: -15px;} 

#block-yui_3_17_2_1_1625779615117_53182 {
   margin-top: -15px;} 

#block-yui_3_17_2_1_1625758746822_50841{
  margin-top:10px;
}

/*hide footers*/
#footerBlocksMiddle {
  display: none!important; }
#footerBlocksBottom {
  display: none!important; }

/*remove underline link*/
#footerBlocksTop a {
    border-bottom:none!important;
}

/*BORDER*/
.Footer {border: 1px solid #000000;} 

//END FOOTER//

Do you want to solve these?

Site URL – https://www.digitaljune.co/

1. (Mobile – Homepage) On desktop, Now booking august is above header, on mobile, Now booking august is below header

https://www.digitaljune.co/home

digitaljune.co-01-min.png

2. (Mobile – Homepage) On desktop, text is on 2 lines, on mobile, text has 4 lines.

https://www.digitaljune.co/home

digitaljune.co-02-min.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources