Jump to content

Custom code affecting mobile view

Recommended Posts

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

After clearing cache.png

Before clearing cache.png

Link to comment
  • Replies 3
  • Views 373
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.