mariah_grimes

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

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...