fixed event cards

ZeroDay-Alliance-SNU · Sep 21, 2024 · 968a41a · 968a41a
1 parent 515fd7d
commit 968a41a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
@@ -21,13 +21,12 @@ const Events = () => {
       <Title className={classes.heading} order={1}>
         Events
       </Title>
-      <SimpleGrid cols={{ base: 1, sm: 2 }}>
+      <SimpleGrid cols={{ base: 1, sm: 2 }} style={{maxWidth:`${27*2}rem` , margin: '0 auto'}}>
         {upcomingEvents.map((event, index) => {
           return (
             <Card key={index} p="md" radius="md" className={classes.card}>
               <AspectRatio ratio="auto">
                 <Image
-                  width={100}
                   radius={5}
                   src={event.banner}
                   alt="Event Poster"

diff --git a/src/components/Events/Events.module.css b/src/components/Events/Events.module.css
@@ -18,13 +18,19 @@
 }
 
 .card {
+  max-width: 25rem;
+  margin: auto;
   transition:
     transform 150ms ease,
     box-shadow 150ms ease;
 
   &:hover {
     box-shadow: var(--mantine-shadow-md);
   }
+  @media (max-width: $mantine-breakpoint-sm){ 
+    max-width: 30rem;
+    margin: auto;
+  }
 }
 
 .title {