CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3adaptive-design
robuh
robuh

Reputation: 61

Problems with disabling responsive grid in Bootstrap 3

I need to disable responsive layout in Bootstrap, but I face some problems.

I replaced meta tag with: 

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

And replaced the grid initialization in container with this:

.container {
  .container-fixed();

  @media (min-width: 200px) {
    width: @container-lg;
  }

  @media (min-width: @screen-xs-min) {
    width: @container-lg;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-md-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

  // min-width: 980px !important;
}

But I see some bugs in small display resolution in my code:
http://www.playground.obuh.by/

What did I do wrong?

Upvotes: 0

Views: 176

Answers (1)

KyleMit
KyleMit

Reputation: 29987

From Bootstrap's Documentation on Disabling Responsiveness

  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

Particularly, pay attention to #4. If you only use col-xs, you can still use the grid layout, but won't see changes on different screen sizes.

Upvotes: 2

Related Questions