changes to frame and canvas container to adjust with changing screen …

…widths.

assets/css/style.css

@@ -315,21 +315,21 @@ section {
             align-items: center;
             flex-direction: column;
             z-index: 1; /* Higher z-index brings this container in front */
-            margin-top:-180px;
+            margin-top:50px;
+        }
+
+.bottom-container {
+            position: relative; /* Establishes a reference for the absolute positioning */
+            margin-top:30px;
         }
 
 .image-container {
-            border: 2px solid black; /* Add border around each image */
             text-align: center;
             position: absolute;
-            /* canvas_viz.png
-            top: 123px;
-            left: 225px;
-            width: 65.5%; */
             /* canvas-viz2.png*/
-            top: 128px;
-            left: 252px;
-            width: 64%;
+            top: 15%;
+            left: 18%;
+            width: 66%;
             background-color: rgba(0, 0, 0, 1); /* Semi-transparent overlay */
             color: white;
             display: flex;

index.html

@@ -102,31 +102,27 @@ <h2>Gradient Canvas Over Time</h2>
     <!-- ======= Explore the Canvas ======= -->
     <section id="visualize" class="section">
       <div class="container">
+
         <div class="section-title" data-aos="fade-in" data-aos-delay="100" style="margin-top:70px;">
           <h3>Explore the Canvas</h3>
           <p style="margin-top:30px">Interested in exploring how the community changed the canvas over time? This is it's current state. Use the slider below to navigate to historical instances of the canvas.</p>
-            <div class="row" style="margin-top:30px;">
-                <div class="col-lg-12 col-md-12" style="position:relative">
-                    <!--img src="assets/img/canvas_viz.png" alt="canvas_frame" style="width:100%;height:76%"-->
-                    <img src="assets/img/canvas_viz2.png" alt="canvas_frame" style="width:100%;height:76%">
-                    <div class="image-container">
-                        <img src="assets/img/gallery/image1.png" id="image1" alt="Image 1">
-                        <img src="assets/img/gallery/image2.png" id="image2" alt="Image 2">
-                        <img src="assets/img/gallery/image3.png" id="image3" alt="Image 3">
-                        <img src="assets/img/gallery/image4.png" id="image4" alt="Image 4">
-                    </div>
-                </div>  
+            <div class="bottom-container">
+                <img src="assets/img/canvas_viz2.png" alt="canvas_frame" style="width:100%">
+                <div class="image-container">
+                    <img src="assets/img/gallery/image1.png" id="image1" alt="Image 1">
+                    <img src="assets/img/gallery/image2.png" id="image2" alt="Image 2">
+                    <img src="assets/img/gallery/image3.png" id="image3" alt="Image 3">
+                    <img src="assets/img/gallery/image4.png" id="image4" alt="Image 4">
+                </div>
+                <div class="slider-container">
+                    <input type="range" min="1" max="4" value="1" class="slider" id="dateSlider">
+                    <div class="date-label" id="dateLabel">2021-01-01</div>
+                </div>
             </div>
-        </div> 
+        </div>  
 
-        <div class="slider-container">
-            <input type="range" min="1" max="4" value="1" class="slider" id="dateSlider">
-            <div class="date-label" id="dateLabel">2021-01-01</div>
-        </div>
+
       </div>
-
-
-
     </section>