added media queries

harikrishnan-p-v · Aug 11, 2024 · 33ec012 · 33ec012
1 parent 2a6ac29
commit 33ec012
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -10,7 +10,12 @@
   </head>
   <body>
     <div class="search-container">
-      <input type="text" name="movie-name" id="movie-name" />
+      <input
+        type="text"
+        placeholder="Enter the movie name"
+        name="movie-name"
+        id="movie-name"
+      />
       <button id="search-button" onclick="GetMovieDetails()">search</button>
     </div>
     <div class="result" id="result">

diff --git a/style.css b/style.css
@@ -11,6 +11,7 @@ body {
 .search-container {
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: 2ch;
   gap: 2ch;
 }
@@ -39,6 +40,7 @@ body {
 .result {
   display: none;
   justify-content: center;
+  align-items: center;
   gap: 3ch;
   padding: 5ch 4ch;
 }
@@ -109,3 +111,29 @@ body {
   font-weight: bold;
   border-radius: 0.5ch;
 }
+
+@media (max-width: 576px) {
+  .search-container {
+    flex-direction: column;
+  }
+
+  .search-container input {
+    width: 100%;
+  }
+
+  .search-container button {
+    width: max-content;
+  }
+
+  .popup-message .message {
+    width: 250px;
+  }
+
+  .result {
+    flex-direction: column;
+  }
+
+  .result-data {
+    order: 2;
+  }
+}