From c66e3771333cf8548ac35c43c0b646ccc05fc20c Mon Sep 17 00:00:00 2001
From: Rose Wang <rosewang01@gmail.com>
Date: Tue, 27 Dec 2022 16:58:48 -0500
Subject: [PATCH] done

---
 client/src/Question/QuestionPage.tsx      |  7 +--
 client/src/Question/ResourceComponent.tsx | 61 +++++++++++------------
 2 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/client/src/Question/QuestionPage.tsx b/client/src/Question/QuestionPage.tsx
index c7a0b58f..8a390ed8 100644
--- a/client/src/Question/QuestionPage.tsx
+++ b/client/src/Question/QuestionPage.tsx
@@ -153,12 +153,7 @@ function QuestionPage() {
   return (
     <ScreenGrid>
       <SidebarComponent currentQuestion={currentQuestion}>
-        <Box
-          justifyContent="space-between"
-          height="100%"
-          margin="auto"
-          marginTop="15%"
-        >
+        <Box height="100%" margin="auto">
           <Box margin="auto">
             <ResourceComponent question={currentQuestion} />
           </Box>
diff --git a/client/src/Question/ResourceComponent.tsx b/client/src/Question/ResourceComponent.tsx
index 90730ab6..4c4c0ed7 100644
--- a/client/src/Question/ResourceComponent.tsx
+++ b/client/src/Question/ResourceComponent.tsx
@@ -15,45 +15,40 @@ function ResourceComponent(props: ResourceComponentProps) {
   return (
     // eslint-disable-next-line no-underscore-dangle
     <div>
-      <ScreenGrid>
+      <Grid
+        container
+        direction="column"
+        justifyContent="space-between"
+        alignItems="center"
+        fit-content="100%"
+        height="100%"
+      >
         <Grid
           container
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="center"
           height="100%"
+          direction="column"
+          alignItems="center"
+          fit-content="100%"
+          justifyContent="space-in"
+          gap="2%"
         >
-          <Grid
-            container
-            height="100%"
-            direction="row"
-            alignItems="center"
-            justifyContent="flex-start"
-            // gap="2%"
-          >
-            <Grid
-              container
-              direction="column"
-              alignItems="center"
-              justifyContent="flex-start"
-            >
-              <Typography variant="h2" fontWeight="bold" textAlign="center">
-                Resources
-              </Typography>
-            </Grid>
-            {question.resultantAnswers.map((answer) => {
-              return (
-                <Grid item margin="auto">
-                  <ResourceDropdown
-                    title={answer.text}
-                    content={answer.resourceContent}
-                  />
-                </Grid>
-              );
-            })}
+          <Grid container direction="column" alignItems="center">
+            <Typography variant="h2" fontWeight="bold" textAlign="center">
+              Resources
+            </Typography>
           </Grid>
+          {question.resultantAnswers.map((answer) => {
+            return (
+              <Grid item margin="auto" marginTop="1%">
+                <ResourceDropdown
+                  title={answer.text}
+                  content={answer.resourceContent}
+                />
+              </Grid>
+            );
+          })}
         </Grid>
-      </ScreenGrid>
+      </Grid>
     </div>
   );
 }