diff options
| -rw-r--r-- | examples/non-responsive/index.html | 2 | ||||
| -rw-r--r-- | examples/non-responsive/non-responsive.css | 3 | ||||
| -rw-r--r-- | getting-started.html | 7 |
3 files changed, 8 insertions, 4 deletions
diff --git a/examples/non-responsive/index.html b/examples/non-responsive/index.html index 7eb2138d1..35f16cddf 100644 --- a/examples/non-responsive/index.html +++ b/examples/non-responsive/index.html @@ -27,7 +27,7 @@ </div> <h3>What changes</h3> - <p>Note the lack of the <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are essentially good to go.</p> + <p>Note the lack of the <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p> <h3>Non-responsive grid system</h3> <div class="row"> diff --git a/examples/non-responsive/non-responsive.css b/examples/non-responsive/non-responsive.css index 19901ca45..2864ca1c5 100644 --- a/examples/non-responsive/non-responsive.css +++ b/examples/non-responsive/non-responsive.css @@ -1,5 +1,6 @@ .container { - max-width: 970px; + max-width: none !important; + width: 970px; } .col-xs-4 { diff --git a/getting-started.html b/getting-started.html index b83ec90dd..68dfedab4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -260,7 +260,7 @@ bootstrap/ <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p> <ol> <li>Remove (or just don't add) the viewport <code><meta></code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li> - <li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li> + <li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>.container { max-width: none !important; }</code> and set a regular width like <code>width: 970px;</code>. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li> <li>For grid layouts, make use of <code>.col-xs-*</code> classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.</li> </ol> <p>You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p> @@ -280,7 +280,10 @@ bootstrap/ <!-- 2. Add our custom CSS to set the container's fixed width --> <style> - .container { max-width: 940px; } + .container { + max-width: none !important; + width: 970px; + } </style> </head> <body> |