Slider size adjustments to retain responsiveness

Hello -

I added the following css to adjust the slider size. I like the look on desktop but it ruins the responsiveness.

.slider_container {
background: url(images/slider-shadow.png) bottom center no-repeat;
height: 430px;
width: 1140px;
margin-bottom: 10px;
padding-bottom: 8px;
overflow: hidden;
}
.sy-slides-crop {
height: 430px !important;
}
.sy-caption-wrap {
left: 5%;
width: 250px;
}
.sy-pager {
left: 8.2%;
}
Can you please give me the code to correct the look on mobile?
url is http://dee.c40.myftpupload.com/
Thanks,
Patty

 

Hello Patty,

Greetings from InkThemes!

Would you please try the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 767px){
.sy-slide > a > img {
    margin: 0;
    width: 100%;
    height: 460px;
}
}
@media only screen and (max-width: 480px){
.sy-slide > a > img {
    margin: 0;
    width: 100%;
    height: 409px;
}
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com