Custom code affecting mobile view

Site URL: https://www.countiesenergy.co.nz/residential/connections

Hi there,

We are having an issue with a module on a page on our website.

https://www.countiesenergy.co.nz/residential/connections

The section is not appearing as it should. The cache on the device/browser (iphone13/chrome) has been cleared but the problem persists. The section was built using custom code.

Can anyone help?

Thank you!

Sam

Hi,

Which custom code did you use?

Hi, thanks for responding. I didn't add the code so it's hard to tell. I think it's this for mobile:

   // SLIDER ON MOBILE
    #slider-wrapper {
      @media @mobile {
      margin-left:35px;
      }
    }
    .tns-liveregion {
        display:none;
    }
    /*Hide arrows*/
    .controls {
      @media @mobile {
        display:none;
      }
    }
    /*Dots*/
    .SliderDots;
          .my-slider-shutdowns {
            display:flex;
        flex-wrap:wrap;
      }
  }
}

----------------------------------------------------------

And this for desktop:

.collection-type-services.view-list {
    .Main-content {
    padding:0;
  }
  .Intro {
    display:none;
  }
}
[id^='home-slider'],#connection-slider,#business-connection-slider,#services-slider,#business-services-slider,#homeSlider, {
  .Index-page-content {
    padding:0;
  }
  #slider-wrapper {
    padding:70px 0;
    background:#e6e6e6;
  }
.slider-container {
    margin: 2rem 0 0 0px;
    overflow: visible;
    border-radius: 5px;
    position:relative;
  .tns-outer {
    @media @tablet-desktop {
    padding-left:80px;
    }
  }
}
  .tns-liveregion {
    display:none!important;
  }
img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}

.my-slider {
    display: flex;
    position: relative;
}

.slider-item {
        h3 {
        font-size:20px!important;
      }
    position: relative;
  .FadeTransition;
  &:hover {
    transform:scale(0.99);
        .sqs-block-button-element--small {
      background:@orange!important;
      color:white;
          border-color:@orange;
    }
  }
  &:hover::before {
    .FadeTransition;
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:96%;
    background: linear-gradient(76.11deg, #F28B39 14.3%, #C73F66 59.76%, #7C3156 103.37%);
    height:5px;
    border-radius:0 0 5px 5px;
  }
  /*Shadows*/
  position:relative;
   &:after {
    content:'';
     left:50%;
     transform:translateX(-50%);
    position:absolute;
    width:80%!important;
    z-index:-100;
    height:15px!important;
    background: rgba(0, 0, 0, 0.3);
    filter: blur(20px);
  }
}
  .slider-item:not(.tns-slide-active) {
    opacity:0.2;
}
  .tns-inner {
    position:relative;
    margin:0 0 0 20px!important;
  }
.controls {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translatey(-50%);
    display: flex!important;
    align-items: center;
    justify-content: space-between;
  z-index:1000;
    &:focus {
        outline: none;
    }

    li:hover {
        cursor: pointer;
    }
  @media @mobile {
    display:none!important;
  }
}
  /*Hide arrows if only three items*/
  .controls.hide {
    display:none!important;
  }
.card {
    display:flex;
  flex-wrap:wrap;
  justify-content:center;
    margin: 0 4% 0 0;
    border-radius: 5px;
    padding:30px 40px;
    border-radius: 5px;
    overflow: hidden;
  background:white;
  height:100%;
  box-sizing:border-box;
  .service-icon {
    height:100px;
    margin-bottom:30px;
    overflow:hidden;
    img {
      height:100%;
    }
  }
    .hero-text-wrapper {
        height:100%;
  }
  .hero-text {
    text-align:center;
  }
  .hero-description {
    font-family: Sk-Modernist;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
letter-spacing: 0em;
text-align: center;
    margin-bottom:13px;
  }
  /*Button*/
  .sqs-block-button-element {
    min-width: 200px;
    font-family: LeituraNews;
}
  .button-block {
    padding-bottom:0;
  }
}
.SliderDots;
}

Hi. It looks fine on iPhone 12.

I can't replicate this problem to help you. You try posting to some Squarespace groups on Facebook: Squarespace Community, Squarespace Customization Resource Group