fixing responsiveness

Eng-Elias · Nov 7, 2023 · 642a370 · 642a370
1 parent f3605c9
commit 642a370
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/web_app_36_hours_day/src/components/Clock.js b/web_app_36_hours_day/src/components/Clock.js
@@ -18,6 +18,8 @@ function Clock(props) {
 
   const { startHour, setPassedTime } = props;
 
+  const mobileDifference = 70;
+
   useEffect(() => {
     let interval;
     (function () {
@@ -110,7 +112,7 @@ function Clock(props) {
               key={i}
               style={{
                 transform: `rotate(${i * 10}deg) translateX(${
-                  isMobile ? 100 - 50 : 100
+                  isMobile ? 100 - mobileDifference : 100
                 }px)`,
               }}
             >
@@ -124,7 +126,7 @@ function Clock(props) {
               key={i}
               style={{
                 transform: `rotate(${i * 6}deg) translateX(${
-                  isMobile ? 145 - 50 : 145
+                  isMobile ? 145 - mobileDifference : 145
                 }px)`,
               }}
             >
@@ -138,7 +140,7 @@ function Clock(props) {
               key={i}
               style={{
                 transform: `rotate(${i * 6}deg) translateX(${
-                  isMobile ? 195 - 50 : 195
+                  isMobile ? 195 - mobileDifference : 195
                 }px)`,
               }}
             >
@@ -152,7 +154,7 @@ function Clock(props) {
               key={i}
               style={{
                 transform: `rotate(${i * 6}deg) translateX(${
-                  isMobile ? 230 - 50 : 230
+                  isMobile ? 230 - mobileDifference : 230
                 }px)`,
               }}
             >

diff --git a/web_app_36_hours_day/src/styles/clock.scss b/web_app_36_hours_day/src/styles/clock.scss
@@ -2,7 +2,7 @@
 @import url('https://fonts.googleapis.com/css?family=BenchNine:300,400');
 
 $layout-breakpoint-small: 500px;
-$radius-difference-for-small: 50px;
+$radius-difference-for-small: 70px;
 
 *, *:after, *:before{
   box-sizing: border-box;
@@ -125,7 +125,7 @@ html{
       z-index: 150;
       font-size: 20px;
       @media (max-width: $layout-breakpoint-small) {
-        font-size: 10px;
+        font-size: 6px;
       }
       font-weight: 400;
       span{
@@ -158,7 +158,7 @@ html{
       color: #fff;
       font-size: 16px;
       @media (max-width: $layout-breakpoint-small) {
-        font-size: 10px;
+        font-size: 8px;
       }
       span:after{ 
         background: #fff; 
@@ -228,8 +228,8 @@ html{
     height: 444px;
     width: 224px;
     @media (max-width: $layout-breakpoint-small) {
-      height: 344px;
-      width: 174px;
+      height: 444px - 2 * $radius-difference-for-small;
+      width: 224px - $radius-difference-for-small;
     }
     background: #090909;
     left: 18px;
@@ -245,8 +245,8 @@ html{
       height: 400px;
       width: 200px;
       @media (max-width: $layout-breakpoint-small) {
-        height: 300px;
-        width: 150px;
+        height: 400px - 2 * $radius-difference-for-small;
+        width: 200px - $radius-difference-for-small;
       }
       border-radius: 220px 0 0 220px;
       left: 25px;
@@ -279,7 +279,7 @@ html{
       border-radius:20px;
       box-shadow:0 0 15px #000 inset;
       padding: 2px 20px;
-      font-size: 16px;
+      font-size: 13px;
     }
 
     .date {
@@ -289,9 +289,9 @@ html{
       top: 100px;
       color: #fff;
       border-radius:20px;
-      font-size: 16px;
+      font-size: 14px;
       @media (max-width: $layout-breakpoint-small) {
-        font-size: 13px;
+        font-size: 9px;
       }
       box-shadow:0 0 10px #000 inset;
       padding: 2px 20px;