diff --git a/Public/grid.css b/Public/grid.css
index 7669643..1059917 100644
--- a/Public/grid.css
+++ b/Public/grid.css
@@ -14,8 +14,7 @@ body {
display: flex;
flex-wrap: wrap;
padding-left: 25px;
- padding-top: 6px;
- margin-top: 50px;
+ padding-top: 56px;
}
#image-canvas img {
width: 50px;
diff --git a/Public/grid.html b/Public/grid.html
index 916fd12..7952922 100644
--- a/Public/grid.html
+++ b/Public/grid.html
@@ -13,7 +13,7 @@
-
+
Bottle Cap Grid | CH Maker Space
diff --git a/Public/grid.js b/Public/grid.js
index 7ec1e1e..5c4c73c 100644
--- a/Public/grid.js
+++ b/Public/grid.js
@@ -41,7 +41,7 @@ const selectedCapCircle = document.getElementById("selected-cap-circle");
imageCanvas.addEventListener("click", function(event) {
const yOffset = 50;
const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left;
- const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top + yOffset;
+ const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top - yOffset;
var row = Math.floor(yPosition / effectiveHeight);
@@ -81,7 +81,7 @@ imageCanvas.addEventListener("click", function(event) {
if (selectedPosition === null) {
selectedPosition = currentPosition;
const circlePositionX = rowIsEven ? column * capImageSize + halfCapImageSize : column * capImageSize;
- const circlePositionY = row * effectiveHeight;
+ const circlePositionY = row * effectiveHeight + yOffset;
selectedCapCircle.style.left = circlePositionX + "px";
selectedCapCircle.style.top = circlePositionY + "px";
selectedCapCircle.style.display = "block";