What is right way to set min-width to container?

Question

Design of my site is designed for minimum resolution 1200px (Large devices Desktops in terms of bootstrap). I want people who have a lower resolution screen have Horizontal Scroll.

I have the following template:

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            //...menu
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div id="table-trips-list">
                    //...grid content
                </div>
            </div>

            <div class="col-lg-4">
                <div id="search-drivers">
                    //...filters
                </div>
            </div>
        </div>
    </div>

</body>

What is the correct way to do this?

score 3 · Accepted Answer · edited May 23 '17 at 10:27

Defines the minimum width in percent of the containing block.

or using px means,

 .container{
 min-width:1200px;         
 width: auto !important;   /* Firefox will set width as auto */
 width:1200px;             /* As IE ignores !important it will set width as 1000px; */
}

or see this stack overflow link.It may helpful.

StackOverFlow for all sizes of window

I have used like this in my site,

   @media screen and (max-width:320px) { */Your styles*/}
   @media screen and (min-width:321px) and (max-width:639px) {}
   @media screen and (min-width:640px) and (max-width:959px) {}
   @media screen and (min-width:960px) and (max-width:1279px) {}
   @media screen and (min-width:1280px) and (max-width:1599px) {}
   @media screen and (min-width:1600px) {}
   @media screen and (min-width:1920px) {}

What is right way to set min-width to container?

1 Answers1