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