Building a responsive product card with HTML and CSS

Product cards are an essential part of e-commerce websites. They display the product information, image, price, and other important details that help customers make purchase decisions. In this tutorial, we will learn how to create a responsive product card using HTML and CSS.

Prerequisites

To follow this tutorial, you should have a basic understanding of HTML and CSS. You should also have a text editor installed on your computer. We will be using Visual Studio Code for this tutorial.

Step 1: HTML Structure

The first step is to create the HTML structure for the product card. We will use a div element with a class of "product-card" as the container for our card. Inside this div, we will have three more divs: one for the image, one for the product information, and one for the price.

<div class="product-card">
  <div class="product-image">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <div class="product-info">
    <h2>Product Name</h2>
    <p>Product Description</p>
  </div>
  <div class="product-price">
    <p>$19.99</p>
  </div>
</div>

Step 2: Styling the Product Card

Now that we have the HTML structure in place, we can start styling the product card with CSS. We will begin by setting some basic styles for the container and the three inner divs.

.product-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  width: 300px;
}

.product-image {
  height: 200px;
  overflow: hidden;
}

.product-info {
  padding: 10px;
}

.product-price {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

Step 3: Styling the Image

Next, we will style the image. We will give it a width of 100% to ensure it resizes properly on different screen sizes. We will also add a transition effect to make the image fade in when hovered over.

.product-image img {
  display: block;
  transition: all 0.5s ease;
  width: 100%;
}

.product-image:hover img {
  opacity: 0.8;
}

Step 4: Styling the Product Information

Now we will style the product information section. We will set the font size, line height, and add some padding to make the text more readable. We will also use the overflow property to add ellipsis to the product description if it is too long.

.product-info h2 {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 5px;
}

.product-info p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Step 5: Styling the Price

Lastly, we will style the price section. We will give it a background color, set the font size, and center the text.

.product-price p {
  font-size: 1.1rem;
  margin: 0;
}

Step 6: Making the Product Card Responsive

Now that we have created the product card, we need to ensure it looks good on different screen sizes. We will use media queries to adjust the styles based on the screen width. Below is an example of how the CSS code for making the product card responsive.

/* Small screens */
@media only screen and (max-width: 600px) {
  .product-card {
    width: 100%;
  }
}

/* Medium screens */
@media only screen and (min-width: 600px) and (max-width: 960px) {
  .product-card {
    width: 45%;
    margin: 10px;
  }
}

/* Large screens */
@media only screen and (min-width: 960px) {
  .product-card {
    width: 30%;
    margin: 10px;
  }
}

Conclusion

In this tutorial, we learned how to create a responsive product card using HTML and CSS. We started by creating the HTML structure for the card and then styled it with CSS. We added styles for the image, product information, and price. Lastly, we made the product card responsive using media queries. With this knowledge, you can now create your own product cards and customize them to suit your needs.