0

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> 
2
Contributors
1
Reply
15
Views
2 Years
Discussion Span
Last Post by Ashley_9
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.