mariah_grimes Posted February 17, 2022 Share Posted February 17, 2022 Site URL: http://www.revolvecycling.net Hi there! in the mobile view of the website I am working on the footer has started to overlap with nearby sections. I deleted it and redesigned it thinking there was something odd going on but I cannot figure it out. None of the blocks have any commands to float or adjust locations...its just really strange and I can't find any content out there about how to fix it... ive figured out it has something to do with the coding I have..but can't pinpoint where /* SITE BORDER */ body { border:20px solid #000000; } header { margin:15px 15px 0 15px; } /* Start Floating Social Links */ @media only screen and (min-width:640px) { footer{ .sqs-svg-icon--wrapper{ display: block !important; margin: 20px 10px !important; } .socialaccountlinks-v2-block{ position: fixed !important; top: 20% !important; /* Adjust this percentage to move the icons up or down */ left: 4% !important; z-index: 99 !important; color: #D41920 !important; } } } /* End Floating Social Links */ /* Start IMAGE CARD BACKGROUND */ .sqs-block-image .design-layout-card .image-card-wrapper { background: #ffffff !important; padding-left: 8% !important; padding-right: 8% !important; padding-top: 8% !important; padding-bottom: 8% !important; } /* End IMAGE CARD BACKGROUND */ /* Start IMAGE CARD BUTTON SIZING*/ .image-button, .image-button.sqs-dynamic-text { font-size: .8em !important; } .image-button a { padding: 1em 1.4em; } /* End IMAGE CARD BUTTON SIZING*/ /* Start MOBILE MENU FONT SIZE */ .header-menu-nav-item a { font-size: 20px; font-weight: 600; } /* Start MOBILE MENU FONT SIZE */ /* Start FOOTER OPT-IN IMAGE */ @media only screen and (min-width: 600px) { #block-yui_3_17_2_1_1634696282803_12798 { .image-caption { position: absolute; transform: rotate(-90deg) translatex(-30%); top: 44%; left: 92%; transform-origin: 0px 0px; width: 600px; } } } /* End FOOTER OPT-IN IMAGE */ /* Start Change Carousel Arrows */ @media only screen and (min-width:640px){ .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 100%; position: absolute; bottom: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } } @media only screen and (max-width:640px){ .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 100%; position: absolute; bottom: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } } .sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide img { margin-left: 41%; width: 15% !important; height: 15% !important; } /* End Change Carousel Arrows */ /* Nav item color */ .header-nav-item a { color: #000000 !important; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { color: #D41920 !important; transition-duration: 0.4s; } /* Nav item active color */ .header-nav-item--active a { color: #D41920 !important; } /* Stack Block */ .sqs-block-image .design-layout-stack .image-overlay{ opacity:.5 } /* LARGE BUTTON HOVER */ .sqs-block-button .sqs-block-button-element--large:hover { background-color: #ffffff;//button color// color: #000000;//button font color// } /* MEDIUM BUTTON HOVER */ .sqs-block-button .sqs-block-button-element--medium:hover { background-color: #D41920;//button color// color: #ffffff;//button font color// } /*===CUSTOMCLASSES===*/ .right-side-text { --name: "Right Side Floating Text"; @media only screen and (min-width: 600px) { text-align: right; white-space: nowrap; margin-left: 40%; margin-top: -200px; position: relative; z-index: 0; animation-name: floating; animation-iteration-count: infinite; animation-duration: 8s; animation-timing-function: ease-in-out; } @media only screen and (max-width: 600px) { display: none; } } /* Animation Timing */ @keyframes floating { from { transform: translate(0, 0px); } 65% { transform: translate(30px, 0); } to { transform: translate(0, 0px); } } .left-side-text { --name: "Left Side Floating Text"; @media only screen and (min-width: 600px) { position: absolute; text-align: left; white-space: nowrap; margin-left: -40px; margin-top: -280px; position: relative; z-index: 0; animation-name: floating; animation-iteration-count: infinite; animation-duration: 8s; animation-timing-function: ease-in-out; } @media only screen and (max-width: 600px) { display: none; } } .bring-to-front { --name: "Bring Block To Front"; z-index: 25; } /*===CUSTOMCLASSES===*/ /*removelinks*/ a { text-decoration: none !important; } footer a { text-decoration: none !important; } header a { background-image: none !important; } @media screen and (max-width:767px) { .homepage section:first-child { height: 40vh !important; min-height: unset !important; } } Link to comment
Beyondspace Posted February 22, 2022 Share Posted February 22, 2022 On 2/18/2022 at 4:51 AM, mariah_grimes said: Site URL: http://www.revolvecycling.net Hi there! in the mobile view of the website I am working on the footer has started to overlap with nearby sections. I deleted it and redesigned it thinking there was something odd going on but I cannot figure it out. None of the blocks have any commands to float or adjust locations...its just really strange and I can't find any content out there about how to fix it... ive figured out it has something to do with the coding I have..but can't pinpoint where /* SITE BORDER */ body { border:20px solid #000000; } header { margin:15px 15px 0 15px; } /* Start Floating Social Links */ @media only screen and (min-width:640px) { footer{ .sqs-svg-icon--wrapper{ display: block !important; margin: 20px 10px !important; } .socialaccountlinks-v2-block{ position: fixed !important; top: 20% !important; /* Adjust this percentage to move the icons up or down */ left: 4% !important; z-index: 99 !important; color: #D41920 !important; } } } /* End Floating Social Links */ /* Start IMAGE CARD BACKGROUND */ .sqs-block-image .design-layout-card .image-card-wrapper { background: #ffffff !important; padding-left: 8% !important; padding-right: 8% !important; padding-top: 8% !important; padding-bottom: 8% !important; } /* End IMAGE CARD BACKGROUND */ /* Start IMAGE CARD BUTTON SIZING*/ .image-button, .image-button.sqs-dynamic-text { font-size: .8em !important; } .image-button a { padding: 1em 1.4em; } /* End IMAGE CARD BUTTON SIZING*/ /* Start MOBILE MENU FONT SIZE */ .header-menu-nav-item a { font-size: 20px; font-weight: 600; } /* Start MOBILE MENU FONT SIZE */ /* Start FOOTER OPT-IN IMAGE */ @media only screen and (min-width: 600px) { #block-yui_3_17_2_1_1634696282803_12798 { .image-caption { position: absolute; transform: rotate(-90deg) translatex(-30%); top: 44%; left: 92%; transform-origin: 0px 0px; width: 600px; } } } /* End FOOTER OPT-IN IMAGE */ /* Start Change Carousel Arrows */ @media only screen and (min-width:640px){ .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 100%; position: absolute; bottom: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } } @media only screen and (max-width:640px){ .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: 100%; position: absolute; bottom: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } } .sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide img { margin-left: 41%; width: 15% !important; height: 15% !important; } /* End Change Carousel Arrows */ /* Nav item color */ .header-nav-item a { color: #000000 !important; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { color: #D41920 !important; transition-duration: 0.4s; } /* Nav item active color */ .header-nav-item--active a { color: #D41920 !important; } /* Stack Block */ .sqs-block-image .design-layout-stack .image-overlay{ opacity:.5 } /* LARGE BUTTON HOVER */ .sqs-block-button .sqs-block-button-element--large:hover { background-color: #ffffff;//button color// color: #000000;//button font color// } /* MEDIUM BUTTON HOVER */ .sqs-block-button .sqs-block-button-element--medium:hover { background-color: #D41920;//button color// color: #ffffff;//button font color// } /*===CUSTOMCLASSES===*/ .right-side-text { --name: "Right Side Floating Text"; @media only screen and (min-width: 600px) { text-align: right; white-space: nowrap; margin-left: 40%; margin-top: -200px; position: relative; z-index: 0; animation-name: floating; animation-iteration-count: infinite; animation-duration: 8s; animation-timing-function: ease-in-out; } @media only screen and (max-width: 600px) { display: none; } } /* Animation Timing */ @keyframes floating { from { transform: translate(0, 0px); } 65% { transform: translate(30px, 0); } to { transform: translate(0, 0px); } } .left-side-text { --name: "Left Side Floating Text"; @media only screen and (min-width: 600px) { position: absolute; text-align: left; white-space: nowrap; margin-left: -40px; margin-top: -280px; position: relative; z-index: 0; animation-name: floating; animation-iteration-count: infinite; animation-duration: 8s; animation-timing-function: ease-in-out; } @media only screen and (max-width: 600px) { display: none; } } .bring-to-front { --name: "Bring Block To Front"; z-index: 25; } /*===CUSTOMCLASSES===*/ /*removelinks*/ a { text-decoration: none !important; } footer a { text-decoration: none !important; } header a { background-image: none !important; } @media screen and (max-width:767px) { .homepage section:first-child { height: 40vh !important; min-height: unset !important; } } Try adding to Home > Design > Custom Css #siteWrapper { overflow: hidden; } Let me know how it works on your site Support me by pressing 👍 if this useful for you 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, Lightbox Studio pluginIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment