Use grid display to fix display in small screen of the exercise 1 (#426)

uclaacm · Jan 23, 2024 · 1cd6c9e · 1cd6c9e
1 parent 81d4917
commit 1cd6c9e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 25 deletions.
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
@@ -67,7 +67,7 @@ function Question(props: QuestionProps): JSX.Element {
           />
           <div className="question-text-wrapper">{props.children}</div>
         </div>
-        <div className="question-wrapper">
+        <div className="button-wrapper">
           {correct ? (
             expand ? (
               <div onClick={() => setExpand(!expand)}>

diff --git a/src/pages/Exercise1.tsx b/src/pages/Exercise1.tsx
@@ -42,18 +42,21 @@ const Exercise1: FC = () => {
             >
               <p className="question-text">
                 The address of the Box b is&nbsp;
-                <span className="dropdown-wrapper">
-                  <Dropdown
-                    options={[
-                      { id: 1, name: '10', displayName: '10' },
-                      { id: 2, name: '11', displayName: '11' },
-                      { id: 3, name: '12', displayName: '12' },
-                      { id: 4, name: '13', displayName: '13' },
-                    ]}
-                    correctAnswer={correctAnswer}
-                    index={0}
-                  />
-                </span>
+                <span className="dropdown-between-text-wrapper">
+                  <span className="dropdown-wrapper">
+                    <Dropdown
+                      options={[
+                        { id: 1, name: '10', displayName: '10' },
+                        { id: 2, name: '11', displayName: '11' },
+                        { id: 3, name: '12', displayName: '12' },
+                        { id: 4, name: '13', displayName: '13' },
+                      ]}
+                      correctAnswer={correctAnswer}
+                      index={0}
+                    />
+                  </span>
+                </span>{' '}
+                .
               </p>
             </Question>
             <Question
@@ -95,18 +98,21 @@ const Exercise1: FC = () => {
             >
               <p className="question-text">
                 The address of the Box e is&nbsp;
-                <span className="dropdown-wrapper">
-                  <Dropdown
-                    options={[
-                      { id: 1, name: '20', displayName: '20' },
-                      { id: 2, name: '21', displayName: '21' },
-                      { id: 3, name: '22', displayName: '22' },
-                      { id: 4, name: '23', displayName: '23' },
-                    ]}
-                    correctAnswer={correctAnswer}
-                    index={2}
-                  />
-                </span>
+                <span className="dropdown-between-text-wrapper">
+                  <span className="dropdown-wrapper">
+                    <Dropdown
+                      options={[
+                        { id: 1, name: '20', displayName: '20' },
+                        { id: 2, name: '21', displayName: '21' },
+                        { id: 3, name: '22', displayName: '22' },
+                        { id: 4, name: '23', displayName: '23' },
+                      ]}
+                      correctAnswer={correctAnswer}
+                      index={2}
+                    />
+                  </span>
+                </span>{' '}
+                .
               </p>
             </Question>
             <Question

diff --git a/src/styles/Question.scss b/src/styles/Question.scss
@@ -4,19 +4,61 @@
   border-radius: 10px;
   box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
   padding: 30px;
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    justify-items: center;
+  }
 }
 
 .question-container-wrapper {
   align-items: center;
   display: flex;
   justify-content: space-between;
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+  }
 }
 
 .question-wrapper {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding-right: 21px;
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+    padding-right: 0;
+  }
+}
+
+.button-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 21px;
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+    padding-top: 15px;
+  }
+}
+
+.question-text-wrapper {
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: flex;
+    justify-items: center;
+    padding-top: 10px;
+    text-align: center;
+  }
 }
 
 .icon {
@@ -76,4 +118,7 @@
   justify-content: center;
   padding-left: 58px;
   padding-top: 20px;
+  @media only screen and (max-width: 850px) {
+    padding-left: 0;
+  }
 }