Final Touch Up For the Page

Fixed the mentioned issues in previous commits, and made most of the page responsive
UoaWDCC · Jul 15, 2024 · d3ca518 · d3ca518
1 parent 2d7cdf6
commit d3ca518
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/frontend/src/ui/events/EventInfo.module.css b/frontend/src/ui/events/EventInfo.module.css
@@ -13,7 +13,7 @@
 }
 
 .descriptionBorder button{
-    min-width: 300px;
+    min-width: 400px;
     max-width:1160px;
     width:100%;
     height:100px;
@@ -39,7 +39,7 @@
     border-radius:75px;
     background-color: #AA6F29;
     max-width: 1160px;
-    min-width: 450px;
+    min-width: 570px;
     width: 100%;
     min-height: 480px;
     height: 100%;
@@ -59,9 +59,11 @@
     font-weight: bold;
     text-decoration: underline 5px;
     text-align: center;
-    line-height:85px;
+    line-height:110px;
     letter-spacing: -1px;
-    width: 570px;
+    max-width: 570px;
+    min-width: 300px;
+    width: 100%;
     font-size: 90px;
     color: #F4E5D7;
     text-shadow: 8px 8px #5E4127;
@@ -72,4 +74,12 @@
     font-size: 30px;
     color: #FBF5F0;
     margin: 15px 50px;
+}
+
+@media screen and (max-width: 1075px){
+    .infoBorder{
+        flex-direction:column;
+        align-items:center;
+        padding-left: 50px;
+    }
 }
diff --git a/frontend/src/ui/events/UpcomingEventCard.module.css b/frontend/src/ui/events/UpcomingEventCard.module.css
@@ -15,13 +15,15 @@
     border-width: 20px; 
     border-color: #DD995B;
     border-radius: 45px;
+    align-self: center;
   }
 
-  .card h1{
+  .card h2{
     text-align: center;
     font-weight: medium;
     font-size: 30px;
     color: #FFFFFF;
     margin-top: 5px;
     margin-bottom: 5px;
+    overflow-y: hidden;
   }
diff --git a/frontend/src/ui/events/UpcomingEventCard.tsx b/frontend/src/ui/events/UpcomingEventCard.tsx
@@ -10,7 +10,7 @@ interface Event {
     return (
       <div className={styles.card}>
         <img src={event.imgUrl} alt={event.eventName} />
-        <h1>{event.eventName}</h1>
+        <h2>{event.eventName}</h2>
       </div>
     );
   }
diff --git a/frontend/src/ui/events/UpcomingEvents.module.css b/frontend/src/ui/events/UpcomingEvents.module.css
@@ -33,4 +33,10 @@
     text-underline-offset: 9px;
     margin-bottom: 10px;
   }
-
+
+  @media screen and (max-width: 1250px){
+    .content{
+        flex-direction:column;
+        align-items:center;
+    }
+}