Make DOJO solve exercises button 100% on small width

garageScript · Sep 24, 2022 · 12945fb · 12945fb
1 parent caa7909
commit 12945fb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
@@ -169,11 +169,18 @@ const ExerciseList = ({
           tabs={tabs}
         />
       </div>
-      <div className="d-flex justify-content-between align-items-center">
-        <h1 className="my-5 fs-2">{lessonTitle}</h1>
-        <NewButton onClick={() => setExerciseIndex(0)}>
-          SOLVE EXERCISES
-        </NewButton>
+      <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
+        <h1 className="my-2 my-md-5 fs-2">{lessonTitle}</h1>
+        <div
+          className={`mb-3 mb-md-0 d-flex d-md-block ${styles.exerciseList__solveExercisesButtonContainer}`}
+        >
+          <NewButton
+            className="flex-grow-1"
+            onClick={() => setExerciseIndex(0)}
+          >
+            SOLVE EXERCISES
+          </NewButton>
+        </div>
       </div>
       <div className={styles.exerciseList__container}>
         {mockExercisePreviews.map((exercisePreview, i) => (

diff --git a/scss/exercises.module.scss b/scss/exercises.module.scss
@@ -3,3 +3,9 @@
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 2em;
 }
+
+.exerciseList__solveExercisesButtonContainer {
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+}