Fixed image stylings in movie details page

index.html

@@ -26,10 +26,10 @@ <h1 id="my-heading">
     </h1>
 
     <!-- Create a button to go back to the home page -->
-    <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
+    <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
 
     <!-- Create a button to go to the About page -->
-    <button class="about" onclick="window.location.href='about.html'">About</button>
+    <button class="about" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
 
     <!-- Create a search form with an input and a button -->
     <form id="form">

movie-details.html

@@ -20,7 +20,7 @@ <h1 id="my-heading">
     <!-- Left side for Title and Image -->
     <div class="movie-left">
         <h2 id="movie-title" class="movie-header"></h2>
-        <img id="movie-image" alt="Movie Image" style="width: 25vw; height: 75vh"/>
+        <img id="movie-image" alt="Movie Image" style="width: 25vw"/>
     </div>
 
     <!-- Right side for Description and Rating -->
@@ -38,4 +38,5 @@ <h2 id="movie-rating" class="movie-rating"></h2>
 
 <script src="movie-details.js"></script>
 </body>
+
 </html>

style.css

@@ -332,6 +332,12 @@ h2:hover {
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
+@media (max-width: 768px) {
+    .movie-image {
+        height: 100%;
+    }
+}
+
 .movie-header {
     text-align: center; /* Center the title */
     align-self: center;
@@ -376,5 +382,5 @@ p {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    overflow: hidden; /* Prevent scrolling on the entire body */
+    /*overflow: hidden; !* Prevent scrolling on the entire body *!*/
 }