How to create a product page with CSS, Responsive for mobile devices



Click to see full page >>


Open in code editor >>



Click to see full page >>


Open in code editor >>


In this guide we will be using the flexbox method, that will help us to provide visitors with more content and make it easier to navigate in that content.


Flex by default will align child elements horizontally, we will make each individual sorting container a flex container itself, also we will be using the flex wrap; method to wrap the children to a new row once there is not enough space to fit all the elements on the same row depending on viewport width of the device.


In this lesson you will learn how to create a product page with CSS, Responsive for mobile devices and as bonus we added click to call button:


This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Click to call button

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>



Code Example:

             
      <!-- navbar section  -->
        <nav id="navbar">
        <div class="container">
          <h1 class="logo"><a href="productpageiframe.php"><span style="color:#f7c08a;"> Open</span> Security </a> </h1>
          <ul>
            <!-- click to call button -->
            <li><a href="tel:0505774207" class="button"> call us</a></li>
            <li><a href="productpageiframe.php">main menu </a></li>
            <!-- class current highlight the page when you in it -->
            <li><a class="current" href="productpageiframe.php">products</a></li>
            <li><a href="productpageiframe.php">about us</a></li>
            <li><a href="productpageiframe.php"> contact</a></li>
          </ul>
        </div>
      </nav> 

      <!-- product section -->
      <section class="products">
        <!-- add more "card" divs if you want more products. -->
          <div class="card">
            <img src="../img/1.jpg" alt="Provision camera" style="height:150px; width:150px; ">
            <h1>Provision PT838 full hd</h1>
              <div class="btg">
            <a  href="tel:0501111111" > call us</a>
          </div>
            <p class="price">type :  security camera</p>
            <p class="price"> brand : Provision</p>
            <p> 25 fps<br>1280x720 max resulotion<br>night vision : 10 meters</p>  
          </div>
          </section> 
  




Part 2


Add CSS

Add the style sheets:


Code Example:

          <style>
/* setting of the page body     */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7em;
}
/* style of the links */
a {
  color: #333;
  text-decoration: none;}
/* logo placement */
.logo a{
  padding-left:130px;}

/* nav bar style start */
#navbar {
  background: #333;
  color: #fff;
  overflow: auto;
  }
#navbar a {
  color: #fff;
  }
#navbar h1 {
  float: left;
  padding-top: 7px;
}
#navbar ul {
  list-style: none;
  float: right;
}
#navbar ul li {
  float: left;
}
#navbar ul li a {
  display: block;
  padding: 10px;
  text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current {
  background: #444;
  color: #f7c08a;
  }  
#navbar li{
padding-right:10px;
padding-left:10px;
}
/* navbar style end */

.products {
  display: flex;
  flex-wrap: wrap;}
.products {
  display: flex;
  flex-wrap: wrap;}
.product-card {
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;
  display: flex; /* so child elements can use flexbox stuff too! */}
.product-card {
  flex: 1 16%;
  }
  /* image width */
.product-image img {
  max-width: 100%;
}
.product-info {
  margin-top: auto;
}
  /* style of the product border and box */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;}
.price {
  color: grey;
  font-size: 22px;}

  /* style of the product border and box */
.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;}
.card button:hover {opacity: 0.7;}

/* click to call button inside product box style */
.btg {
  margin-left: 25%;
  margin-right: 25%;
  border-radius:20px;
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
  }

/* size of each product borders */
.card{ 
  padding:10px;
  height:470px;
  width:300px;}

/* click to call button and its hover style */
  a.button {
  border-radius:20px;
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));}

a.button:hover {
  background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
  }

  /* responsive media query for mobile devices */
  @media (max-width: 920px) {
  .product-card {
    flex: 1 21%;
    }
    #showcase  {
      display: none;
  }
  #navbar li{
padding-right:10px;
padding-left:10px;
padding-top:10px;

}
  #home-info .info-img {
  display: none;
}
/* navbar style for mobile devices below 1000px */
#navbar .logo {
  float: none;
  text-align: center;
}
#navbar ul,
#navbar ul li {
  float: none;
}
#navbar ul li a {
  padding: 5px;
  border-bottom: #444 dotted 1px;
}
/* place logo in middle for mobile devices */
.logo a{
    padding-left:0px;
}
.logo h1{
    padding-left:0px;
}
.container a.button{
    display:none !important;
}
/* place navbar in middle for mobile devices */
.container ul{
    padding-left:0px;
}


/* moving the text  to the center cause we deleted photo */
#home-info .info-content {
  float: none;
  width: 100%;
}
    }
    </style> 
  

Try yourself >>


Visit our CSS Media Queries tutorial to create responsive mobile friendly navigation menus and more CSS Media Queries tutorial



Navigation