fix css

LiamSwayne · Mar 9, 2024 · 322e5f2 · 322e5f2
1 parent 9715cad
commit 322e5f2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/site/calculator.html b/site/calculator.html
@@ -30,24 +30,24 @@ <h1>CO2 Emissions Calculator</h1>
     <div class="tree-slider">
         <input type="checkbox" class="checkbox" id="organization1Checkbox" onclick="toggleOrganization('organization1')" />
         <label for="organization1Checkbox"> <a href="https://www.nationalforests.org/tree-planting-programs" target="_blank">National Forest Foundation</a>: $1 per tree</label>
-        <input type="range" style="width:200px;" id="organization1" min="0" max="1000" step="1" value="0" aria-labelledby="organization1Label" disabled />
-        <output style="margin-left: 8px;" id="organization1Output">0 trees</output>
+        <input type="range" style="margin-top:16px; width:200px;" id="organization1" min="0" max="1000" step="1" value="0" aria-labelledby="organization1Label" disabled />
+        <output style="margin-top:16px; margin-left: 8px;" id="organization1Output">0 trees</output>
     </div>
 
     <!-- #TeamTrees -->
     <div class="tree-slider">
         <input type="checkbox" class="checkbox" id="organization2Checkbox" onclick="toggleOrganization('organization2')" />
         <label for="organization2Checkbox"><a href="https://teamtrees.org/" target="_blank">#TeamTrees</a>: $1 per tree</label>
-        <input type="range" style="width:200px;" id="organization2" min="0" max="1000" step="1" value="0" aria-labelledby="organization2Label" disabled />
-        <output style="margin-left: 8px;" id="organization2Output">0 trees</output>
+        <input type="range" style="margin-top:16px; width:200px;" id="organization2" min="0" max="1000" step="1" value="0" aria-labelledby="organization2Label" disabled />
+        <output style="margin-top:16px; margin-left: 8px;" id="organization2Output">0 trees</output>
     </div>
 
     <!-- One Tree Planted -->
     <div class="tree-slider">
         <input type="checkbox" class="checkbox" id="organization3Checkbox" onclick="toggleOrganization('organization3')" />
         <label for="organization3Checkbox"><a href="https://onetreeplanted.org/products/plant-trees" target="_blank">One Tree Planted</a>: $1 per tree</label>
-        <input type="range" style="width:200px;" id="organization3" min="0" max="1000" step="1" value="0" aria-labelledby="organization3Label" disabled />
-        <output style="margin-left: 8px;" id="organization3Output">0 trees</output>
+        <input type="range" style="margin-top:16px; width:200px;" id="organization3" min="0" max="1000" step="1" value="0" aria-labelledby="organization3Label" disabled />
+        <output style="margin-top:16px; margin-left: 8px;" id="organization3Output">0 trees</output>
     </div>
 
     <h2>Results</h2>

diff --git a/site/styles.css b/site/styles.css
@@ -22,7 +22,9 @@ input, output {
 .tree-slider {
     margin-bottom: 30px;
     background-color: #333333;
-    padding: 15px;
+    padding: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
     border-radius: 8px;
     display: flex; /* Add flex display to align items horizontally */
     align-items: center; /* Center items vertically */
@@ -46,7 +48,7 @@ input, output {
 input[type=number]::-webkit-inner-spin-button,  
 input[type=number]::-webkit-outer-spin-button {  
     -webkit-appearance: none;  
-    margin:  0;  
+    margin: 0;  
 }
 
 input[type=number] {