_eskaywhy Posted July 9, 2021 Posted July 9, 2021 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//
tuanphan Posted July 10, 2021 Posted July 10, 2021 Add to Design > Custom CSS /* remove white bar at bottom of screen */ .Mobile-bar.Mobile-bar--bottom { display: none; } 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!)
tuanphan Posted July 17, 2021 Posted July 17, 2021 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 2. (Mobile – Homepage) On desktop, text is on 2 lines, on mobile, text has 4 lines. https://www.digitaljune.co/home 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.