feat: make cover image responsive

jumperexchange · Jun 26, 2024 · f39ad13 · f39ad13
1 parent 88fca1d
commit f39ad13
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/src/components/Superfest/SuperfestPage/SuperfestMisisonPage.tsx b/src/components/Superfest/SuperfestPage/SuperfestMisisonPage.tsx
@@ -96,19 +96,20 @@ export const SuperfestMissionPage = ({
         </Box>
         {/* big component with the main information */}
         <BannerMainBox>
-          <Image
-            src={`${new URL(
-              attributes.BannerImage?.data[0]?.attributes?.url,
-              baseUrl,
-            )}`}
-            alt="Banner Image"
-            height={316}
-            width={1300}
-            style={{
-              borderTopLeftRadius: '8px',
-              borderTopRightRadius: '8px',
-            }}
-          />
+          <Box sx={{ position: 'relative', width: '100%', height: '60%' }}>
+            <Image
+              src={`${new URL(
+                attributes.BannerImage?.data[0]?.attributes?.url,
+                baseUrl,
+              )}`}
+              fill
+              alt="Banner Image"
+              style={{
+                borderTopLeftRadius: '8px',
+                borderTopRightRadius: '8px',
+              }}
+            />
+          </Box>
           <BannerBottomBox>
             {/* date + chains */}
             <Box