
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>