Таблица цен на полосы [дубликат] ⇐ CSS

[Anonymous]

Я встроил таблицу цен Stripe на свой веб-сайт, но тарифные планы расположены вертикально (столбцами), а не рядами. Я подозреваю, что это проблема с моими стилями, поскольку на панели инструментов Stripe тарифные планы, как и предполагалось, расположены в строках.
Это мой HTML -

Код: Выделить всё

ECNUSBeta
Early user lifetime 80% off

80% Off Deal For Lifetime For Early Users, Use This Code:
“ECNUSBeta”

"Never miss any crucial update again as an ecom seller"




Start Your 14-Day Free Trial Now







99% of Ecom Brands say they need a Centralized Platform to Stay Updated.  So we built it.



Learn More
Join Now



Already a user?
[url={% url ]Log in[/url]

Это мой CSS –

Код: Выделить всё

/* Global Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

/* Main Container */
.container {
display: flex;
max-width: 1000px;
width: 90%;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
}

/* Left Section (Blue Background) */
.left-section {
background-color: #003366;
color: white;
padding: 30px 20px;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.discount-code {
background-color: #b5ff81;
color: #01000e;
font-weight: bold;
padding: 10px 20px;
border-radius: 6px;
font-size: 1rem;
margin: 0;
}

.early-user-discount {
background-color: #feffff;
color: #003366;
font-weight: bold;
font-family: epilogue;
padding: 10px 20px;
border-radius: 6px;
font-size: 1rem;
text-transform: uppercase;
margin: 0;
}

.discount-text {
font-size: 45px;
font-weight: bold;
line-height: 1.4;
font-style: italic;
font-family: 'Epilogue';
}

.code-text {
color: #b5ff81
}

.info-text {
font-size: 21px;
color: #d1d1d1;
font-family: epilogue;
margin-top: auto;
}

/* Right Section (White Background) */
.right-section {
background-color: white;
padding: 30px 20px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
max-height: 80vh; /* Limit height */
overflow-y: auto;
}

.right-section h1 {
font-size: 1.5rem;
color: #003366;
}

/* Stripe Pricing Table */
.stripe-table-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center; /* Center the pricing table */
gap: 20px;  /* Optional: adds space between the pricing tables */
flex-wrap: wrap;
}

/* CTA Buttons */
.cta-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 15px;
}

.cta-button {
padding: 10px 20px;
font-size: 1rem;
font-weight: bold;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}

.join-btn {
background-color: #007BFF;
color: white;
}

.join-btn:hover {
background-color: #0056b3;
}

.learn-more-btn {
background-color: white;
color: #007BFF;
border: 2px solid #007BFF;
}

.learn-more-btn:hover {
background-color: #007BFF;
color: white;
}

/* Login Section */
.login-text {
font-size: 0.9rem;
color: #555;
margin-top: 15px;
}

.login-link {
color: #007BFF;
font-weight: bold;
text-decoration: none;
}

.login-link:hover {
text-decoration: underline;
}

/* Additional Text */
.additional-text {
font-size: 1rem;
color: #333;
font-family: epilogue;
}

/* Adjustments for Smaller Screens */
@media (max-width: 768px) {
.modal {
padding: 20px; /* Add some padding around the modal */
}

.container {
flex-direction: column; /* Stack sections vertically */
width: 90%; /* Full width with some margin */
max-width: 400px; /* Limit width for better appearance */
margin: auto; /* Center the modal */
}

.left-section, .right-section {
padding: 15px; /* Reduced padding for smaller screens */
}

.discount-text {
font-family: 'Epilogue';
font-size: 1.2rem; /* Smaller font size */
}

.info-text, .additional-text {
font-size: 0.9rem; /* Smaller font size */
}

.cta-button {
width: 100%; /* Full width buttons */
padding: 12px 0; /* Adjusted padding */
font-size: 1rem; /* Consistent font size */
}

.stripe-table-container {
flex-direction: column; /* Stack pricing tables vertically */
width: 100%; /* Full width */
}

/* Ensure that the modal's blur effect does not obstruct content */
.blur {
filter: blur(2px); /* Less intense blur */
}
}

Это моя ручка Code - -

Подробнее здесь: https://stackoverflow.com/questions/791 ... cing-table