Member Avatar for davy_yg

Hello,

I would like to include bootstrap for both desktop and mobile phone for product category:

When I check it once it only works in desktop if I only use this code (col-md-4) and if I use both code (col-md-4 col-xs-4) it does not work for both desktop and mobile phone. Is there anyway to make it works for both?

product-category.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">  

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/carouselstyles.css">
   <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/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>

<center><div style="width: 600px; text-align: left;"><h4>Product Category</h4></div></center>

<center><br><br><br><br>

<div style="width: 700px;">
<div class="row">
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
</div>
</div>
<br>

<div style="width: 700px;">
<div class="row">
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
</div>
</div>
<br>

<div style="width: 700px;">
<div class="row">
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" width="200" height="200"></div>
</div>
</div>
<br>   

</center>

<br><br><br><br><center>

<center><h4>OUR FEATURES</h4></center><br><br>

<div style="width:500px; text-align:left;">
<b>HIGH QUALITY PRODUCTS</b><br>

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. <br><br>

<b>100% RESPONSIVE PRODUCTS</b><br>

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. <br><br>

<b>POWERFUL PERFORMANCE</b><br>

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. 
</div>

</center>

<br><br><br><br><br><br><br><br>


<?php include('footer.php'); ?>



</body>

</html>
Edited by davy_yg
  • 3 Contributors
  • 2 Replies
  • 1K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by UK-1991
Member Avatar for gentlemedia

Why are you adding your own div tags with fixed widths. That's going to lead into layout issues as you've noticed. You built wilt Bootstrap so stick to its grid system. I told you before already, but as usual you don't listen. Same as you didn't listen NOT to use the depricated <center> tag to center content. And using all these <br> tags to space out things is also not the way to go, but has been told to you numerous times as well.

http://www.sitepoint.com/understanding-bootstrap-grid-system/

Member Avatar for UK-1991

As you have used the with in px so it wont work on mobile devices please try to use the width in % or you can take another div inside you col and give the fixed size to thenm so it can be aligned easily

.col-xs-4 img {
    width:100%;
}

<div style="width: 100%;">
<div class="row">
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" ></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg"></div>
<div class="col-md-4 col-xs-4"><img src="Images/product/product.jpg" ></div>
</div>
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.