I'm struggling to make my website responsive on mobile devices. I'm using Bootstrap, but when viewed on a mobile device, it's not adjusting the layout properly. Other sites I've worked on automatically zoom in to display correctly on mobile.
If anyone can spot what I'm doing wrong here, any advice would be greatly appreciated!
Here's the code snippet I'm currently using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE HERE</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div role="main">
<header>
<div class="container">
<div class="row address">
<div class="span12">
<h2><?=$content['address']?><br/>
<?=$content['city']?> <?=$content['state']?> <?=$content['zip']?></h2>
</div>
</div>
<div class="row-fluid prop_info">
<div class="span12">
<h3>$<?=number_format($content['price'])?> | <?=$content['beds']?> Bedrooms | <?=$content['baths']?> Bathrooms | <?=number_format($content['square_feet'])?> Square Feet | MLS# <?=$content['mls_id']?></h3>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row center">
<div class="span12">
<ul class="nav nav-pills menu">
<li><a href="#">VIDEO</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">WALKSCORE MAP</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row center">
<div class="span12">
<div id="description-shadow-video-top"></div>
<iframe id="vp1HMbXI" title="Video Player" width="100%" height="auto" frameborder="0" src="<?=$content['video_url']?>" allowfullscreen></iframe>
<div id="description-shadow-video"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<?=$content['main_content']?>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="span12">
<div class="pull-left">
<br/>
<br/>
<br/>
<img src="/img/foundation/presented-by.png" width="120" alt="" />
</div>
<div class="pull-left">
<img src="/img/some_pic.jpg" alt="" name="agentImg" width="90" id="agentImg" />
</div>
</div>
</div>
<br/>
<div class="row center">
<div class="span12">
<h3><?=$user['first_name']?> <?=$user['last_name']?></h3>
<br />
<?=$user['company']?><br /><?=$user['address']?>
<br />
<?=$user['city']?>, <?=$user['state']?> <?=$user['zip']?>
<br />
<br />
<?=$user['contact_number']?>
<br />
<a href="mailto:<?=$user['email_address']?>"><?=$user['email_address']?></a>
<br />
<br />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="span12">
<a href="http://www.somesite.com" target="_blank">
<img src="/img/the_logo.png" width="210" />
</div>
</div>
</footer>
</div>
</body>
</html＞