Jump to content

CSS code causing pages to overlap

By mariah_grimes, in Customize with code

Recommended Posts

mariah_grimes Level 4

mariah_grimes

Posted
Posted

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

 

Screen Shot 2022-02-17 at 3.37.45 PM.png

Screen Shot 2022-02-17 at 3.37.38 PM.png

Screen Shot 2022-02-17 at 2.50.38 PM.png

Screen Shot 2022-02-17 at 2.45.03 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Beyondspace Level 14

Beyondspace

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

 

Screen Shot 2022-02-17 at 3.37.45 PM.png

Screen Shot 2022-02-17 at 3.37.38 PM.png

Screen Shot 2022-02-17 at 2.50.38 PM.png

Screen Shot 2022-02-17 at 2.45.03 PM.png

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 plugin
If 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

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