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