Bootstrap 3 responsive desktop and mobile layout

Question

Using bootstrap 3 to design my responsive website, I\'m having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decr

Answer 1

In you main.css (or whatever name you placed), do something like code below:

@media(max-width:1024px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #heading > .container {
    padding: 0 15px;
  }

  #main-content > .container {
    padding: 0 15px;
  }

  #footer > .container {
    padding: 0 15px;
  }
  #heading h1 {
    font-size: 50px;
    line-height: 55px;
  }
  #heading h4 {
    font-size: 20px;
    line-height: 25px;
  }
}

Answer 2

The row-fluid and container-fluid are deprecated from BS 3, so now you just use container and row

You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-3">
            <div class="well">

            </div>
        </div>
        <div class="col-lg-9 col-sm-9">

            <div class="col-lg-6 col-sm-6">
                <div class="well">

            </div>
            </div>

            <div class="col-lg-6 col-sm-6">
                <div class="well">

                 </div>
            </div>

        </div>
    </div>
</div>

Demo: http://bootply.com/71450

If you want it to never stack, even on the smallest displays, use the tiny col-xs-* grid classes.

Answer 3

Looking through their documentation regarding the grid system (http://getbootstrap.com/css/), it would seem they have break points at <768, 768-992, 992-1200 and >1200 pixels, so you're now falling into the 'medium devices' category.

You could modify the bootstrap.css file to change the break points for your particular case.

@media (min-width: 992px) { 

on lines 1002 and 4595.