From 54f8fd916af10a86f91a11befdea4503a8913388 Mon Sep 17 00:00:00 2001 From: Sapinder Date: Mon, 11 Jan 2021 18:56:51 +0530 Subject: [PATCH] fix scale issue on smaller screens --- index.html | 3 ++- style.css | 12 ++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index da0e313..3e8cead 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ - + + Type Ahead 👀 diff --git a/style.css b/style.css index 3e414df..65c24f7 100644 --- 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; + } +} \ No newline at end of file