made dashboard card responsive for large screen

QuizandSurveyMaster · Nov 25, 2024 · 5a6fa52 · 5a6fa52
1 parent 7e07c8f
commit 5a6fa52
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/css/admin-dashboard.css b/css/admin-dashboard.css
@@ -1073,6 +1073,30 @@ h2.hndle.ui-sortable-handle {
     padding: 25px;
 }
 
+@media (max-width: 768px) {
+    .qsm-dashboard-cards-container .qsm-dashboard-card {
+        width: 100%;
+    }
+	.qsm-dashboard-cards-container .qsm-dashboard-card:not(:last-child) {
+        margin-bottom: 10px;
+    }
+}
+
+@media (min-width: 770px) and (max-width: 1280px) {
+    .qsm-dashboard-cards-container .qsm-dashboard-card {
+        width: calc(50% - 20px);
+    }
+	.qsm-dashboard-cards-container .qsm-dashboard-card:not(:last-child) {
+        margin-bottom: 10px;
+    }
+}
+
+@media (min-width: 1441px) {
+    .qsm-dashboard-cards-container .qsm-dashboard-card {
+        width: 32%;
+    }
+}
+
 .qsm-dashboard-cards-container .qsm-dashboard-card .qsm-dashboard-card-content {
 	display: flex;
 	flex-direction: column;