Menu
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>
632
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.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
