Article Categories

Selected Reading

How to create a responsive pricing table with CSS?

CSS Web Development Front End Technology

Creating a responsive pricing table with CSS allows you to display comparison plans that adapt seamlessly across different devices. These tables are commonly used on web hosting websites and membership platforms to showcase features of various plans like free, business, and enterprise tiers.

Syntax

.pricing-container {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .pricing-container {
        flex-direction: column;
    }
}

Example: Responsive Pricing Table

The following example creates a responsive pricing table with two membership plans that stack vertically on mobile devices −

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
    }
    
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
    }
    
    .pricing-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .pricing-card {
        flex: 1;
        min-width: 300px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .pricing-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    
    .pricing-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
        padding: 30px 20px;
        border-radius: 10px 10px 0 0;
    }
    
    .pricing-header.premium {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .plan-name {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }
    
    .plan-price {
        font-size: 32px;
        margin: 10px 0 0 0;
    }
    
    .pricing-features {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .pricing-features li {
        padding: 15px 30px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        text-align: center;
    }
    
    .pricing-features li:last-child {
        border-bottom: none;
        padding-bottom: 30px;
    }
    
    .register-btn {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-decoration: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: bold;
        margin-top: 10px;
        transition: background 0.3s ease;
    }
    
    .register-btn.premium {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .register-btn:hover {
        opacity: 0.9;
    }
    
    @media (max-width: 600px) {
        .pricing-container {
            flex-direction: column;
            gap: 15px;
        }
        
        .pricing-card {
            min-width: auto;
        }
        
        .plan-name {
            font-size: 20px;
        }
        
        .plan-price {
            font-size: 24px;
        }
    }
</style>
</head>
<body>
    <h1 style="text-align: center; color: #333;">Choose Your Plan</h1>
    
    <div class="pricing-container">
        <div class="pricing-card">
            <div class="pricing-header">
                <h2 class="plan-name">Free Plan</h2>
                <div class="plan-price">$0/month</div>
            </div>
            <ul class="pricing-features">
                <li>20 messages per month</li>
                <li>Basic email support</li>
                <li>98% uptime guarantee</li>
                <li>1GB daily bandwidth</li>
                <li>5GB total storage</li>
                <li>
                    <a href="#" class="register-btn">Get Started</a>
                </li>
            </ul>
        </div>
        
        <div class="pricing-card">
            <div class="pricing-header premium">
                <h2 class="plan-name">Premium Plan</h2>
                <div class="plan-price">$19/month</div>
            </div>
            <ul class="pricing-features">
                <li>Unlimited messages</li>
                <li>24/7 priority support</li>
                <li>99.9% uptime guarantee</li>
                <li>50GB daily bandwidth</li>
                <li>500GB total storage</li>
                <li>
                    <a href="#" class="register-btn premium">Upgrade Now</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Two modern pricing cards display side by side on desktop - a blue "Free Plan" and a pink "Premium Plan". Each card shows the plan name, price, feature list, and a call-to-action button. On mobile devices (below 600px), the cards stack vertically for better readability.

Key Features

CSS Property	Purpose
`display: flex`	Creates flexible layout for cards
`flex-direction: column`	Stacks cards vertically on mobile
`@media queries`	Applies responsive breakpoints
`transform: translateY()`	Adds hover animation effects

Conclusion

Creating responsive pricing tables with CSS involves using Flexbox for layout flexibility and media queries for mobile adaptation. This approach ensures your pricing information remains accessible and visually appealing across all devices.

AmitDiwan

Updated on: 2026-03-15T14:58:06+05:30

489 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next