fix card size

WeiViv · Oct 9, 2024 · c534f5d · c534f5d
1 parent fddac5c
commit c534f5d
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/CourseList.css b/src/components/CourseList.css
@@ -1,13 +1,15 @@
 .course-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 14rem);
-    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
+    gap: 0.1rem; /* Space between the cards */
+    margin-top: 10px;
 }
 
 .card {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: 230px;
+    width: 200px;
     padding: 0; /* Remove internal padding if necessary */
     box-sizing: border-box;
     border: 1px solid #ddd; /* Set a border to make unselected cards visible */