From 07f2f95e130678e8e4794afc08cbb3b08ecdc69a Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Thu, 9 Nov 2023 21:31:07 -0700
Subject: [PATCH] Fix grid overflowing at certain dimensions

---
 script.js | 9 +++------
 style.css | 2 --
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/script.js b/script.js
index 554cc8a..8d09097 100644
--- a/script.js
+++ b/script.js
@@ -2,19 +2,17 @@ let numGrid = 16; //will use this later to prompt user
 //need to figure out the wrapping issue
 const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
-const conHeight = container.clientHeight
 const grid = document.createElement("div");
 const gridSlider = document.querySelector("#gridSlider");
 
 
 function createGrid() {
     const gridArea = numGrid ** 2;
-    const gridWidth = conWidth / numGrid;
-    const gridHeight = conHeight / numGrid;
+    const gridWidth = 100 / numGrid;
 
     grid.classList.add("grid");
-    grid.style.width = gridWidth + 'px';
-    grid.style.height = gridHeight + 'px';
+    grid.style.width = gridWidth + '%';
+    grid.style.height = gridWidth + '%';
 
     for (let i = 0; i < gridArea; i++){
         container.appendChild(grid.cloneNode(true));
@@ -27,7 +25,6 @@ function createGrid() {
     });
 
     gridSlider.addEventListener("change", getGridDimensions);
-
 }
 
 
diff --git a/style.css b/style.css
index 5988dea..b6f1e64 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,4 @@ body{
 .grid {
     border: 1px solid #bbb;
     box-sizing: border-box;
-    min-height: 0;
-    overflow: hidden;
 }
\ No newline at end of file