BMI form box sizing modified.

mu-senpai · Aug 3, 2024 · 18a913d · 18a913d
1 parent c6b3e6b
commit 18a913d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/styles/responsive.css b/styles/responsive.css
@@ -197,23 +197,27 @@
         padding-bottom: 40px;
     }
 
-    .calculate-bmi-form-options{
+    /* .calculate-bmi-form-options{
         width: 100%;
         height: 50px;
         align-items: stretch;
-    }
+    } */
 
-    .calculate-bmi-form-options input[type="number"]{
+    /* .calculate-bmi-form-options input[type="number"]{
         width: 42%;
-    }
+    } */
 
-    .calculate-bmi-form-options select[id="Sex"]{
+    /* .calculate-bmi-form-options select[id="Sex"]{
         width: 47.5%;
         height: 100%;
-    }
+    } */
 
-    .calculate-bmi-form select[id="Activity"]{
+    /* .calculate-bmi-form select[id="Activity"]{
         height: 100%;
+    } */
+
+    .calculate-bmi-form-button{
+        margin-top: 20px;
     }
     /* calculate bmi section responsive ends */
 

diff --git a/styles/style.css b/styles/style.css
@@ -54,6 +54,7 @@
     font-size: 0.875rem;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.5);
+    line-height: 24px;
     margin: 0;
 }
 
@@ -105,7 +106,6 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    /* margin-bottom: 32px; */
 }
 
 .nav-heading{
@@ -117,6 +117,7 @@
 
 .nav-listing-container{
     border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 4px;
     border-radius: 39px;
 }
 
@@ -316,6 +317,7 @@
     font-size: 0.875rem;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.5);
+    line-height: 18px;
     text-align: center;
 }
 /* change habit section styling ends */
@@ -342,6 +344,7 @@
     font-size: 3rem;
     font-weight: 900;
     color: rgb(255, 255, 255);
+    line-height: 120%;
     text-align: left;
     margin: 0;
     margin-bottom: 14px;
@@ -351,6 +354,7 @@
     font-size: 0.875rem;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.5);
+    line-height: 24px;
     text-align: left;
     margin: 0;
     margin-bottom: 34px;
@@ -485,6 +489,7 @@
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.875rem;
     font-weight: 400;
+    line-height: 24px;
     margin-top: 14px;
     margin-bottom: 34px;
 }
@@ -523,7 +528,8 @@
 }
 
 .calculate-bmi-form input[type="number"]{
-    width: 45%;
+    box-sizing: border-box;
+    width: 49%;
     padding: 12px 0 12px 20px;
     border: none;
     border-radius: 8px;
@@ -534,8 +540,9 @@
 }
 
 .calculate-bmi-form select[id="Sex"]{
-    width: 48.5%;
-    padding: 11px 0 11px 20px;
+    box-sizing: border-box;
+    width: 49%;
+    padding: 12px 0 12px 20px;
     border: none;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
@@ -545,8 +552,9 @@
 }
 
 .calculate-bmi-form select[id="Activity"]{
+    box-sizing: border-box;
     width: 100%;
-    padding: 11px 0 11px 20px;
+    padding: 12px 0 12px 20px;
     border: none;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
@@ -570,6 +578,7 @@
 .footer-section{
     max-width: 100vw;
     padding-top: 66px;
+    padding-bottom: 35px;
     border: 1px solid rgba(0, 0, 0, 0.90);
     background-color: rgba(0, 0, 0, 0.90);
 }
@@ -652,6 +661,6 @@
     font-size: 1.25rem;
     font-weight: 400;
     text-align: center;
-    margin: 35px auto;
+    margin: 35px auto 0;
 }
 /* footer section styling ends */