From 5cc2f81c2211b12abcdb7f68379101e8429ea556 Mon Sep 17 00:00:00 2001 From: "M. Umar Shahbaz" Date: Thu, 22 Aug 2024 22:57:58 +0500 Subject: [PATCH] Resized Window for phones --- index.html | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index da3f388..dc2d25f 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ justify-content: center; align-items: center; height: 100vh; + padding-top: 10%; background-color: #f0f2f5; margin: 0; } @@ -71,6 +72,31 @@ color: #333; margin-bottom: 20px; } + @media (max-width: 600px) { + .button-container { + display: grid; + grid-template-columns: repeat(1, 150px); /* 1 column with fixed width */ + grid-template-rows: repeat(12, 1fr); /* 12 rows with flexible height */ + justify-content: center; /* Center align horizontally */ + align-items: center; /* Center align vertically */ + max-width: 100%; /* Ensure the container doesn't exceed the viewport width */ + margin: 0 auto; /* Center align container horizontally */ + } + + .button-container button { + width: 150px; /* Fixed width for buttons */ + } + } + @media (max-width: 350px) { + body { + padding-top: 15%; + } + } + @media (max-width: 270px) { + body { + padding-top: 30%; + } + } @@ -103,5 +129,4 @@

NodeMCU Digital Output Controller

}); - - + \ No newline at end of file