Fix more issues with CSS on the sleep data.

corysanders3 · Feb 26, 2024 · e989366 · e989366
1 parent 28d8792
commit e989366
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -55,7 +55,7 @@ <h1 id="averageSleepTitle"></h1>
                 <h2>Avg Hours Slept</h2>
                 <h2>Avg Sleep Quality</h2>
               </section>
-              <div class="meter-container">
+              <div class="meter-container" id="meter-container-avg">
                 <div class="sleep-meter" id="sleepHoursMeterAverage">
                   <div class="sleep-data" id="sleepHoursAverage">0</div>
                 </div>

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -43,6 +43,14 @@ aside,
   justify-content: space-evenly;
 }
 
+.meter-container {
+  margin-bottom: 15%;
+}
+
+#meter-container-avg {
+  margin-bottom: 5%;
+}
+
 section,
 #infoCard,
 #days,
@@ -118,6 +126,7 @@ section,
 
 #info {
   width: 60%;
+  margin-bottom: 5%;
 }
 
 #friends {
@@ -128,6 +137,7 @@ section,
 
 #friendsHeader {
   margin-bottom: 8%;
+  padding-top: 5%;
 }
 
 h1 {
@@ -239,11 +249,6 @@ button {
   filter: none;
 }
 
-#dateSleepTitle {
-  margin-top: -3%;
-  margin-bottom: -5%;
-}
-
 #averageSleepTitle {
   margin-top: -2%;
 }