Simple CTA cards. Flex-direction is set to column for media query <= 768, but browser is ignoring the breakpoint.
I expected the items in the container to display in a column format when the screen size was <= 768px but they remain in a row.
.pricing-container { display: flex; justify-content: center; align-items: center; height: 100vh; gap: 2rem;}.pricing-plan { flex: 1; max-width: 400px; background-color: #f2f2f2; border-radius: 5px; padding: 20px; text-align: center;}.plan-button { background-color: #ff6600; color: white; border: none; border-radius: 5px; padding: 10px;}@media (max-width: 768px) { .pricing-container { flex-direction: column; height: 100%; } .pricing-plan { width: 400px; }}<div class="pricing-container"><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$11.99/month</div><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$19.99/month</div><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$49.99/month</div><button class="plan-button">Sign Up</button></div></div>