How to create a responsive pricing table with CSS?

On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices.

Compare Fields

Set the fields for comparison. For that, you can use the <ul> and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. features a user will get for free with no payment. A button is also placed in the button for the users to click if they are interested in that specific membership plan:

<div class="compareFields">
   <ul class="pricing">
      <li class="header">Free Membership</li>
      <li>20 messages</li>
      <li>No customer Support</li>
      <li>98% uptime</li>
      <li>1GB per day</li>
      <li>50GB storage</li>
      <li>
         <a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a>
      </li>
   </ul>
</div>

For the paid membership, we have used the same format and mentioned all the features a user will get after paying −

<div class="compareFields">
   <ul class="pricing">
      <li class="header" style="background-color:rgb(250, 136, 59)">
         Advanced Membership
      </li>
      <li>100 messages</li>
      <li>24 * 7 customer support</li>
      <li>99.9% uptime</li>
      <li>8GB per day</li>
      <li>150GB storage</li>
      <li>
         <a href="#" class="button" style="background-color:rgb(250, 136, 59)" >Register</a>
      </li>
   </ul>
</div>

Position the compare fields

The position of the fields to be compared are set to left −

.compareFields {
   float: left;
   width: 50%;
   padding: 8px;
}

Pricing Features

The features for the pricing table are styled with <ul>. Since, we have used the unordered list, therefore set the type to none to make the bullets invisible −

.pricing {
   list-style-type: none;
   border: 1px solid #eee;
   margin: 0;
   padding: 0;
   -webkit-transition: 0.3s;
   transition: 0.3s;
}

Set the responsiveness

Media Queries are used to set the responsiveness. The width is set to 100% when the screen size is less than 600px −

@media only screen and (max-width: 600px) {
   .compareFields {
      width: 100%;
   }

Example

To create a responsive pricing table with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .compareFields {
         float: left;
         width: 50%;
         padding: 8px;
      }
      li {
         font-size: 18px;
         font-weight: 500;
      }
      .pricing {
         list-style-type: none;
         border: 1px solid #eee;
         margin: 0;
         padding: 0;
         -webkit-transition: 0.3s;
         transition: 0.3s;
      }
      .pricing:hover {
         box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
      }
      .pricing .header {
         background-color: rgb(52, 31, 129);
         color: white;
         font-size: 25px;
      }
      .pricing li {
         border-bottom: 1px solid #eee;
         padding: 20px;
         text-align: center;
      }
      .button {
         border: none;
         color: white;
         padding: 10px 25px;
         text-align: center;
         text-decoration: none;
         font-size: 18px;
      }
      @media only screen and (max-width: 600px) {
         .compareFields {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h1 style="text-align:center">Responsive Pricing Tables Example</h1>
   <div class="compareFields">
      <ul class="pricing">
         <li class="header">Free Membership</li>
         <li>20 messages</li>
         <li>No customer Support</li>
         <li>98% uptime</li>
         <li>1GB per day</li>
         <li>50GB storage</li>
         <li>
            <a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a>
         </li>
      </ul>
   </div>
   <div class="compareFields">
      <ul class="pricing">
         <li class="header" style="background-color:rgb(250, 136, 59)">
            Advanced Membership
         </li>
         <li>100 messages</li>
         <li>24 * 7 customer support</li>
         <li>99.9% uptime</li>
         <li>8GB per day</li>
         <li>150GB storage</li>
         <li>
            <a href="#" class="button" style="background-color:rgb(250, 136, 59)" >Register</a>
         </li>
      </ul>
   </div>
</body>
</html>

Updated on: 14-Dec-2023

249 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements