CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designslider
Jimmy
Jimmy

Reputation: 79

Make slider responsive using media query

Here's a page: http://simply-black.stonerbunting.com

I'm trying to make this website responsive. I tried couple of stackoverflow solutions as well as other but the slider on the homepage is not getting responsive properly.

I tried using this css:

.slider-wrapper .slider li .slide{
    height: 250px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.slider-wrapper{
    width: 100%;
    height: 473px;
}
.slider-wrapper .slider{
    width: 100%;
}
.slider-wrapper .slider li{
width: 100%;
}

its using a jcarousel custom slider. Can you guide to right direction?

Thanks for your valuable time.. :)

Upvotes: 0

Views: 7764

Answers (1)

Undisclosed Name
Undisclosed Name

Reputation: 133

Not sure how well this will work on your end. I played with it in Firefox and seems to work fine:

/* Breakpoint: 768px - Set to whatever value you want. You might want to duplicate this query and change the height of .slider-wrapper .slider li to target different screen resolutions */ 

@media (max-width: 768px) {

    .container { 
        padding: 0;
        width: 100%;
    }

    .slider-wrapper{
        width: 100% !important;
        height: auto;
    }

    .slider-wrapper .slider {
        width: 2000%;
    }

    .slider-wrapper .slider li {
        width: 5% !important;
        position: relative;
        min-height: 300px; /* change this to whatever value you want */
    }

    .slider-wrapper .slider li .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-size: cover;
    }

    /* Text */
    .slider-wrapper .slider li .overlay {
        width: 60%; /* change this to whatever value you want */
        top: 10%;
        /*display: none; */ /* uncomment display:none; to hide text on smaller screens if needed */
    }

    .slider-wrapper .slider li .overlay .text {
        padding: 10px;
    }

}

/* iPad - landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

    .slider-wrapper .slider li {
        min-height: 722px;
    }

}

/* iPad - Portrait */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

    .slider-wrapper .slider li {
        min-height: 973px;
    }

    /* optional - make navbar reach the bottom of the page */
    .container { position: absolute !important; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
    .navbar { height: 95% }

}

Upvotes: 2

Related Questions