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

Dani AI

Generated

Fixed-width wrappers and fixed image sizes are the real blockers. The page uses inline widths (for example several style="width:700px") and width="200" height="200" on images, so the Bootstrap grid never gets a chance to flow. As pointed out, drop the inline fixed widths and the deprecated <center>/excess <br> spacing. As suggested, let images be percentage-based so they scale with their column.

Replace the hard wrappers with a Bootstrap container + row and pick sensible breakpoint classes so the number of columns changes across devices. Example (Bootstrap 3 approach):

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="product-thumb">
        <img src="Images/product/product.jpg" class="img-responsive center-block" alt="Product">
      </div>
    </div>
    <!-- repeat columns as needed -->
  </div>
</div>

Keep product images responsive with CSS that doesn't lock pixels:

.product-thumb img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 240px; /* optional cap, remove if not needed */
  margin: 0 auto;
}

Quick checklist (short): confirm <meta name="viewport"> is present, remove all inline fixed widths, avoid width/height attributes on <img>, load custom CSS after Bootstrap so overrides apply, and ensure jQuery is loaded before bootstrap.js. Use devtools to try different device sizes — the grid will behave correctly once wrappers and image sizing are fluid.

Recommended Answers

All 2 Replies

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.