Untitled
body { font-family: Arial, sans-serif; } #dash-cards { margin-right: 100px; } .order-card { color: #fff; } .bg-c-red { background: linear-gradient(45deg, #DC143C, #DC143C); } .bg-c-applegreen { background: linear-gradient(45deg, #8BC34A, #4CAF50); } .bg-c-orange { background: linear-gradient(45deg, #E34234, #E34234); } .bg-c-blue { background: linear-gradient(45deg, #4099ff, #73b4ff); } .bg-c-green { background: linear-gradient(45deg, #2ed8b6, #59e0c5); } .card { width: 210px; /* Fixed width for the card */ height: 120px; /* Fixed height for the card */ border-radius: 5px; box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16); border: none; margin: 0; /* Remove margin to eliminate space */ transition: all 0.3s ease-in-out; } .card .card-block { padding: 25px; } .order-card i { font-size: 26px; margin-right: 100px; } .order-card h2 { padding-left: 10px; /* Add space to the left of the number */ } .f-left { float: left; } .f-right { float: right; } .row { margin-right: 0; /* Remove the extra margin */ } .col-md-4 { margin-right: 0; /* Remove the extra margin */ } #dash-cards { margin-left: auto; margin-right: auto; max-width: 1200px; /* Control the max width for better centering */ padding: 0 20px; /* Add some padding if necessary */ } .container { max-width: auto; height: auto; } .card-container { display: flex; gap: 20px; justify-content: flex-start; /* Aligns the cards to the start */ flex-wrap: wrap; } .problemchart { display: flex; justify-content: space-around; align-items: center; background-color: white; width: 100%; height: 60%; margin: auto; padding: 0; box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16); border-radius: 20px; } #problempiechart, #problembargraph { width: 45%; height: 500px; } @media (max-width: 992px) { .card-container { justify-content: center; } } @media (max-width: 768px) { .card-container { flex-direction: column; align-items: center; } }
Leave a Comment