Issues with hero slider displaying on mobile device

Question

Please help, i have a template that uses hero slider. The slider works fine in desktop but not on mobile. I was told to tweak the style.css file to resolve it.

I have read some similar issues here but no solutions. Can anyone help with it?

The template owners said the solution is in the stle.css but couldnt respond further.

Kinda confused not to mess up the style.css file. Find the style.css code below for the hero slider:

        Hero Area CSS
========================================*/ 
.home-slider {
    overflow: hidden;
}
.hero-slider {
    position: relative;
}
.hero-slider,
.hero-slider .single-slider{
    height:680px;
}
.hero-slider .single-slider {
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-slider .single-slider .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.65;
}
.hero-slider .welcome-text {
    margin: 146px 0 0;
}
.hero-slider .hero-text h4 {
    color: #fff;
    margin-bottom: 10px;
    font-weight: 400;
    display: inline-block;
    background: #2E2751;
    padding: 8px 20px;
    font-size: 16px;
}
.hero-slider .hero-text h4:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    border-top: 8px solid #2E2751;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.hero-slider .hero-text h1 {
    color: #2E2751;
    font-size: 50px;
    font-weight: bold;
    line-height: 65px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.hero-slider .hero-text h1::before {
    content: "";
    position: absolute;
    left: 0;
    width: 50px;
    height: 6px;
    background: #1775b3;
    bottom: -3px;
}
.hero-slider .hero-text .p-text{
    max-width:80%;
}
.hero-slider .hero-text p {
    color: #666;
    font-size: 15px;
}
.hero-slider .hero-text .button {
    margin-top: 30px;
}

/* Text Center */
.hero-slider .hero-text.text-center h1::before {
    left: 50%;
    margin-left: -25px;
}

/* Text Left */
.hero-slider .hero-text.text-right h1::before {
    left: auto;
    right:0;
    margin:0;
}

/* Slider Nav */
.hero-slider .owl-nav{
    margin: 0;
    width: 100%;
}
.hero-slider .owl-carousel .owl-nav div {
    width: 50px;
    height: 60px;
    line-height: 60px;
    background: #1775b3;
    color: #fff;
    position: absolute;
    margin: 0;
    padding: inherit;
    font-size: 30px;
    text-align: center;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    border-radius: 0px;
    top: 50%;
    margin-top: -30px;
}
.hero-slider .owl-carousel .owl-nav div:hover{
    color:#fff;
    background:#2E2751;
}
.hero-slider .owl-carousel .owl-nav .owl-prev{
    left:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-prev{
    left:0px;
}
.hero-slider .owl-carousel .owl-nav .owl-next{
    right:-100px;
}
.hero-slider:hover .owl-carousel .owl-nav .owl-next{
    right:0px;
}

/* Hero Animations */
.hero-slider .owl-item.active .hero-text h4{
    animation: fadeInUp 0.8s both 1s;
}
.hero-slider .owl-item.active .hero-text h1{
    animation: fadeInRight 1s both 1.2s;
}
.hero-slider .owl-item.active .hero-text p{
    animation: fadeInLeft 1.2s both 1.4s;
}
.hero-slider .owl-item.active .button{
    animation: fadeInUp 1.4s both 1.6s;
}



/* Hero Agency */
.hero-agency .ageny-main {
    padding-top: 158px;
}
.hero-agency .hero-text {
    z-index: 555;
    position: relative;
    text-align: center;
}
.hero-agency .agency-inner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
}
.hero-agency .agency-inner:before {
    opacity: 0;
    background: #fff;
}
.hero-agency .hero-text {
    z-index: 555;
    position: relative;
    text-align: center;
}
.hero-agency .hero-text h1 {
    font-size: 55px;
    color: #2E2751;
    font-weight: 700;
    line-height: 65px;
}
.hero-agency .hero-text h1 span {
    color: #1775b3;
}
.hero-agency .hero-text h4 {
    font-weight: 500;
}
.hero-agency .video-head {
    margin-top: 35px;
    position: relative;
}
.hero-agency .video-head .video {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 100%;
    background: #1775b3;
    color: #fff;
    display: inline-block;
    font-size: 28px;
}
.hero-agency .video-head .video:hover{
    background:#fff !important;
    color:#1775b3;
    -webkit-box-shadow:0px 0px 15px #00000029;
    -moz-box-shadow:0px 0px 15px #00000029;
    box-shadow:0px 0px 15px #00000029;
}
.hero-agency .video-play-main {
    display: inline-block;
    padding: 5px;
    z-index: 3333;
    position: relative;
}
.hero-agency .waves-block .waves {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid #1775b38a;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-radius: 100%;
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 3s ease-in-out infinite;
    left: 50%;
    margin-left: -75px;
    top: 50%;
    margin-top: -75px;
}
.hero-agency .waves-block .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.hero-agency .waves-block .wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.hero-agency .waves-block .wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}
@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}


/* Agency Feature */
.hero-agency .agency-feature {
    display: block;
    text-align: center;
    margin-top: 40px;
}
.hero-agency .a-feature {
    background: #fff;
    padding: 45px 20px;
    text-align: center;
    z-index: 333;
    position: relative;
    width: 220px;
    display: inline-block;
    margin-right: 20px;
    border-radius: 0;
    box-shadow: -2px 4px 13px rgba(0, 0, 0, 0.12);
    border-top: 2px solid #1775b3;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.hero-agency .a-feature:hover{
    border-top-color:#1775b3;
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    transform:scale(1.05);
}
.hero-agency .a-feature:last-child{
    margin:0;
}
.hero-agency .a-feature i {
    display: inline-block;
    border-radius: 100%;
    font-size: 40px;
    top: -30px;
    background: #fff;
    color: #1775b3;
    left: 50%;
}
.hero-agency .a-feature h4 {
    color: #2E2751;
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 12px;
    line-height: 22px;
}
.hero-agency .a-feature p {
    line-height: 22px;
    font-size: 14px;
}
/*======================================
   End Hero Area CSS
========================================*/ 

Answer 1

To rephrase your question, you need to design the site to be mobile.

That involves adding new CSS rules that apply at lower screen sizes (or higher, it's your CSS).

If you apply CSS media queries like they do in this popular SO post, then you will be probably be able to solve your problem:

CSS media queries for screen sizes