0

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
24
Views
1 Year
Discussion Span
Last Post by UK-1991
1

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/

0

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>
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.