HTML Using Bootstrap CSS Not Responsive

Question

I'm using Bootstrap 3.0 panels and trying to figure out why a page is not responsive on mobile devices. It displays properly on a desktop browser, but doesn't view optimized on mobile devices.

The panel examples on the Bootstrap site do indeed display optimized on mobile.

Am I missing something?

Here's the html:

<!DOCTYPE html>
<html lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

  <title>a title</title>
  </head>

  <body>  
    <div class="container">
      <div class="row">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="media">
          <div class="media-body">
        <div class="row-fluid">
          <div class="row">
            <div class="col-md-12"><h1 class="media-heading">This is a heading using h1s.</h1></div>
          </div>
        </div>
        <br>
        <div class="row-fluid">
            <div class="span4 top-buffer">

            </div>
        </div>
          </div>
        </div>
        <br>
      </div>
    </div>
      </div>    
    </div>  
  </body>
</html>

Marcy Sutton · Accepted Answer · 2013-09-16 18:37:31Z

18

Looks like you're missing a viewport tag in the head of your HTML. Docs

Like this:

 <meta content='maximum-scale=1.0, initial-scale=1.0, width=device-width' name='viewport'>

Except it could be argued that disabling zoom is a bad idea if your text is too small to read, so take care to test it on a variety of devices with different users in mind.

answered Sep 16, 2013 at 18:37

Marcy Sutton

91712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raj Over a year ago

Awesome. That was it!

Olly Hodgson Over a year ago

Yes, disabling zoom is usually A Bad Thing™. Remove maximum-scale=1.0, to bring it back :)

dmeu Over a year ago

This was a real live saver!

Collectives™ on Stack Overflow

HTML Using Bootstrap CSS Not Responsive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related