added responsiveness to team and events page cards

uclaacm · Oct 18, 2023 · 944312b · 944312b
1 parent f775076
commit 944312b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/styles/BoardCard.module.scss b/styles/BoardCard.module.scss
@@ -99,4 +99,4 @@
   .container {
     width: 21rem;
   }
-}
+}
diff --git a/styles/EventCard.module.scss b/styles/EventCard.module.scss
@@ -54,4 +54,4 @@
     min-width: auto;
     width: auto;
   }
-}
+}
diff --git a/styles/Events.module.scss b/styles/Events.module.scss
@@ -56,5 +56,5 @@
 @media (max-width: 576px) {
   .main {
     padding: 2rem 3rem;
-  } 
+  }
 }
diff --git a/styles/Teampage.module.scss b/styles/Teampage.module.scss
@@ -19,16 +19,15 @@
   font-size: 3.5rem;
 }
 
-.description {
-  margin: 1rem;
-  font-size: 1.1rem;
-}
-
 .subtitle {
-  margin: 1rem;
-  font-size: 32px;
+  margin: 1.25rem 1.5rem 0 1.5rem;
+  font-size: 1.75rem;
   line-height: 1;
-  margin-top: 2rem;
+}
+
+.description {
+  margin: 1rem 1.5rem;
+  font-size: 1.1rem;
 }
 
 .boardgrid {
@@ -57,11 +56,42 @@
   // grid-area: card;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
+  .main {
+    padding: 2rem 3rem;
+  }
+
+  .title {
+    font-size: 3rem;
+  }
+
+  .subtitle {
+    margin-top: 0;
+    font-size: 1.6rem;
+  }
+
+  .description {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 576px) {
   .grid {
     width: 100%;
     flex-direction: column;
   }
+
+  .title {
+    margin: 1rem 0;
+  }
+
+  .subtitle {
+    margin-left: 0.5rem;
+  }
+
+  .description {
+    margin-left: 0.5rem;
+  }
 }
 
 @media (prefers-color-scheme: dark) {