adding adaptive metrics image width

index.html

@@ -499,7 +499,7 @@ <h2 class="title is-3">Measuring Motion Fidelity</h2>
                         <br>
 
                         <div style="text-align: center;">
-                            <img src="sm/assets/pics/metrics.png" alt="motion_fidelity" width="50%">
+                            <img src="sm/assets/pics/metrics.png" alt="motion_fidelity" id="metrics_image">
                         </div>
 
                     </div>

static/css/index.css

@@ -463,4 +463,15 @@ body {
     /* Set the width to 60% for larger screens */
     width: 60%;
   }
+}
+
+#metrics_image {
+  /* Default width for small screens or when no media query matches */
+  width: 100%;
+
+  /* Media query for screens with a minimum width of 768 pixels (adjust as needed) */
+  @media screen and (min-width: 768px) {
+    /* Set the width to 60% for larger screens */
+    width: 50%;
+  }
 }