Hello,
I would like to fix my bootstrap code on this web browser. I wonder why on android :
http://www.innovation.web.id/One/blog.php
my footer and navigation bar does not filled in the whole screen. It seems like there is a fix width for android whereas the my blog article width seems wider than the navigation and footer bar. What should I do?
blog.php
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
<script src="bootstrap-3.3.5/js/jquery.min.js"></script>
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<?php include('nav.php'); ?>
<br><br><br>
<div style="text-align:center"><h1><b>Our Blog</b></h1></div>
<br><br><br><div style="text-align:center">
<div class="row">
<div class="col-sm-6">
<div style="padding: 20px; background: white;">
<div style="margin-top: 30px; width:440px; height: 500px; background:grey; z-index: -1; text-align: left; padding: 20px; "><br><img src="Images/Blog/blog1.jpg" alt="blog1">
<h4>Lorem ipsum dolor sit amet</h4>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <div id="readlink1"><a href="blog-article.php">Read More .. </a></div>
</div>
</div>
</div>
<br>
<div class="col-sm-6">
<div style="padding: 20px; background: white;">
<div style="margin-top: 10px; width:440px; height: 500px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog2.jpg" alt="blog2">
<h4>Lorem ipsum dolor sit amet</h4>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <div id="readlink2"><a href="blog-article2.php">Read More .. </a></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div style="padding: 20px; background: white;">
<div style="margin-top: 30px; width:440px; height: 500px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog3.jpg" alt="blog3">
<h4>Lorem ipsum dolor sit amet</h4>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <div id="readlink3"><a href="blog-article3.php">Read More .. </a></div>
</div>
</div>
</div>
<br>
<div class="col-sm-6">
<div style="padding: 20px; background: white;">
<div style="margin-top: 30px; width:440px; height: 500px; background:grey; z-index: -1; text-align: left; padding: 20px;"><br><img src="Images/Blog/blog4.jpg" alt="blog4">
<h4>Lorem ipsum dolor sit amet</h4>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <div id="readlink4"><a href="blog-article4.php">Read More .. </a></div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center">
<div style="font-family: Arial; ">
<h1><b><br><br><br>Please Subscribe our newsletter</b></h1><br>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<br><br>
<input type="text" name="email"><input id="submitbutton" type="submit" value="Email">
</div>
<br><br>
<div style="text-align:center">
<img src="Images/Blog/twitter.jpg" alt="twitter"><br>
<img src="Images/Blog/cusor.jpg" alt="cusor">
</div>
<br><br><br><br>
<div style="text-align:center">
<div style="font-family: Arial;">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br><br><br>
</div>
</div>
<?php include('footer.php'); ?>
</body>
</html>
