Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    The bootstrap slider is responsive in small device.

    You have some custom css codes that modified the bootstrap slider, you should use media query with min-width to prevent them from affecting your small device screen.

    Thanks!

    Thread Starter kendros

    (@kendros)

    hi,

    the booststrap slider is responsive in landscape mode but not in portrait view.
    I tried this code
    /* ———– iPhone 4 and 4S ———– */

    /* Portrait and Landscape */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
    }

    /* Landscape */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ———– iPhone 5 and 5S ———– */

    /* Portrait and Landscape */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
    }

    /* Landscape */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ———– iPhone 6 ———– */

    /* Portrait and Landscape */
    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ———– iPhone 6+ ———– */

    /* Portrait and Landscape */
    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }
    but nothing change .. what else should I do ?
    Thanks!

    Hi,

    Go to your Theme Options -> Custom CSS
    and find the following codes.

    #bootstrap-slider .carousel-inner .img-responsive {
        height: 470px !important;
    }

    Remove it. This code is forcing the bootstrap slider height to be 470px at all times.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘boostrap slider not responsive’ is closed to new replies.