Responsive Design in IPhone and hidden slider in landscape device

Question

I'm using Bootstrap framework in my website My website is no't Responsive in IPhone and Ipad device And I'm create slider using JQuery I want to show slider in mobile device, hidden in landscape desktop

Answer 1

You need to use Media Queries with your bootstrap to make it more responsive for mobile devices, tablets, desktop etc. Your website will be responsive for landscape desktop, IPhone, IPad etc. You can also create slider for mobile devices and for desktop, Just put display to none.

/* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
            .slider {
               display:none;
             }

    }

Here are other media queries that you can use for almost every device.

/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }