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