bootstrap - make the page non-responsive and show desktop version to all devices

Question

I have currently a website that is responsive but since its not very good in mobiles and tablets I want to make it like desktop ( .col-md-x ) on all smaller devices. I use bootstrap 3.

so if the resolution is more than 1200px it should show large version ( .col-lg-x ) and if not, it should always show the desktop version ( .col-md-x ).

to do this I deleted the

<meta name="viewport" content="width=device-width, initial-scale=1">

tag from the page head tag and replaced it with

<meta name="viewport" content="width=1024">

that do the trick but the page was very very zoomed out. so I changed the bootstrap break points in bootstrap customization page so that col-xs-x and col-sm-x and col-md-x breaks on 1px page width, and col-lg-x on 1200px .

its better now but the sidebars and some other elements will hide on small devices and full page is not shown there. what I want is a complete page like desktop with horizontal and vertical scrollbars and no breaking and no hiding and no collapsing navbar and other things. how can I achieve this?

Answer 1

use Media Queries for Standard Devices You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> you can learn

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

example

/*==========  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) {

    }

Answer 2

If you define only the behaviour for col-xs-x, it should automatically show the same behaviour for the larger formats, so the solution here is to just use col-xs-x on your elements.

We don't have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up . So if you define a size at sm, then it will be that grid size for sm, md, and lg.

More information can be found here