Fix exercise side styling

uclaacm · Oct 31, 2023 · e660b85 · e660b85
1 parent cadeef8
commit e660b85
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -132,7 +132,7 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
     );
   } else if (exercises[completeExercises] === 'unitcircle') {
     curExercise = (
-      <div className="exercise-box">
+      <div>
         <div>
           <UnitCircleExercise
             turtleAngle={1}

diff --git a/src/styles/Exercises/UnitCircleExercise.scss b/src/styles/Exercises/UnitCircleExercise.scss
@@ -1,19 +1,13 @@
 .circle-container {
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: center;
-  // margin: 25% 10% 15%;
-  // position: relative;
-  // width: calc(550px + 1vw);
-  align-items: center;
-  align-self: center;
   display: flex;
   flex-direction: row;
-  height: calc(150px + 1vw);
   justify-content: center;
-  margin: 2%;
-  max-width: 100%;
-  width: 50%;
+  //margin: 25% 10% 15%;
+  //width: calc(550px + 1vw);
+  margin-bottom: 5%;
+  margin-left: 30%;
+  position: relative;
+  width: 400px;
 }
 
 .circle {
@@ -30,15 +24,15 @@
 
 .circle-exercise {
   font-family: Quattrocento Sans, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-style: italic;
   font-weight: bold;
   position: absolute;
 }
 
 .circle-label {
   font-family: Cascadia Code, sans-serif;
-  font-size: 4.5vh;
+  font-size: 2vh;
   font-weight: regular;
   position: absolute;
 }

diff --git a/src/styles/Exercises/UnitCircleInput.scss b/src/styles/Exercises/UnitCircleInput.scss
@@ -27,13 +27,16 @@
   flex-direction: column;
   margin-bottom: -15px;
   margin-top: -15px;
-  padding-left: 20%;
+  padding-left: 8%;
 }
 
 #unitcircle-check-question {
   @include font-styles();
+  font-size: calc(13px + 1vw);
   font-style: normal;
   margin-bottom: 2vh;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .unitcircle-check-box {