+
+
diff --git a/script.js b/script.js
index b14ec78..3681b69 100644
--- 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
index 441b3c4..52fadb7 100644
--- 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 */
+
+
+