interactive area is now whole page rather than image contaner

davidepaci · Oct 5, 2024 · 2f50860 · 2f50860
1 parent e04e3c1
commit 2f50860
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -29,8 +29,10 @@
     <meta name="twitter:image" content="https://leoslap.it/images/00031.jpg">
 </head>
 <body>
-    <div id="slider-container">
-        <img id="eelImage" src="images/0001.jpg" alt="Eel Slap Image">
+    <div id="page-container">
+        <div id="slider-container">
+            <img id="eelImage" src="images/0001.jpg" alt="Eel Slap Image">
+        </div>
     </div>
     <script src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -1,6 +1,6 @@
 const totalFrames = 62; // Total number of frames
 const eelImage = document.getElementById('eelImage');
-const container = document.getElementById('slider-container');
+const container = document.getElementById('page-container');
 
 function updateFrame(e) {
     // Determine if it's a touch event

diff --git a/style.css b/style.css
@@ -1,18 +1,34 @@
 body, html {
-    height: 100%;
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f0f0f0;
-    max-width: 100vw;
     overflow-x: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+#page-container {
+    /* Full page */
+    width: 100%;
+    height: 100%;
+    display: block;
+    justify-content: center;
+    align-items: center;
 }
 
 #slider-container {
     width: 640px; /* Set this to the width of your images */
     overflow: hidden;
     cursor: pointer;
+    /* Center the container */
+    display: block;
+    margin: 0 auto;
+    /* Center vertically */
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 /* Default styles for larger screens */