From b42839a20262a0eaabb0b4af151c921a37644f3b Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Mon, 13 Nov 2023 03:08:09 -0700
Subject: [PATCH] Fix transparency number causing parent div to expand and move
 other elements around

---
 index.html |  2 +-
 style.css  | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 73f67b2..b2fd2e8 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
         
         <div class="grid-input">
             <h3 class="tool-labels">Grid Tools</h3>
-            <label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
+            <label class="sub-labels trans" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
             <input class="range-slider" name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
             <div class="grid-tools">
                 <div class="slider">
diff --git a/style.css b/style.css
index dd6387d..c438338 100644
--- a/style.css
+++ b/style.css
@@ -92,6 +92,10 @@ button:active, .container:active, .color-input:active{
     font-size: 18px;
     color: #f0fbf8;
 }
+.trans.sub-labels {
+    display: flex;
+    flex-direction: column;
+}
 
 .color-input {
     width: 120%;
@@ -111,10 +115,10 @@ button {
     height: 500px;
     width: 100%;
     max-width: 500px;
+    margin: 20px;
     display: flex;
     flex-wrap: wrap;
     background: rgb(180, 254, 235);
-    will-change: contents;
 }
 
 .grid {
@@ -221,8 +225,6 @@ input[type="range"]::-webkit-slider-runnable-track {
     margin-top: 5px;
     position: relative;
     z-index: 1;
-    transform-style: preserve-3d;
-    will-change: transform;
 }
 .knob:hover {
     box-shadow: 1px 2px 10px 1px #68ffd8;
@@ -276,6 +278,9 @@ input[type="range"]::-webkit-slider-runnable-track {
         display: flex;
         flex-direction: column;
     }
+    .trans.sub-labels {
+        display: block;
+    }
 }
  
 @media screen and (max-width: 559px) {