fix scale issue on smaller screens

sapinder-singh · Jan 11, 2021 · 54f8fd9 · 54f8fd9
1 parent ac31237
commit 54f8fd9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Type Ahead 👀</title>
   <link rel="stylesheet" href="style.css">
 </head>

diff --git a/style.css b/style.css
@@ -16,8 +16,7 @@ input {
 }
 
 .search-form {
-	min-width: 50vw;
-	max-width: 600px;
+	max-width: 400px;
   margin: 50px auto;
 }
 
@@ -32,7 +31,7 @@ input {
   top: 10px;
   z-index: 2;
   border-radius: 5px;
-  font-size: 30px;
+  font-size: 25px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
 }
 
@@ -53,7 +52,6 @@ input {
   display: flex;
   justify-content: space-between;
 	text-transform: capitalize;
-	font-weight: bold;
 }
 .suggestions li:nth-child(even) {
   transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
@@ -71,3 +69,9 @@ span.population {
 .highlight {
   background: #ffc600;
 }
+
+@media (max-width: 600px) {
+	.search-form {
+		width: 80vw;
+	}
+}