Fixes for small screens

bhumii-ka · bhumii-ka · commit df0d01af40f1 · 2024-06-16T17:34:45.000+05:30
diff --git a/01 - Drum Kit/index.html b/01 - Drum Kit/index.html
@@ -3,13 +3,15 @@
 
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Drum Kit</title>
   <link rel="stylesheet" href="style.css">
   <link rel="icon" href="assets/drum.png">
   <link rel="icon" href="assets/favicon.png">
 </head>
 
 <body>
+  <div id="container">
   <h1 id="title">Drum Kit</h1>
   <div class="keys">
     <div data-key="65" class="A key">
@@ -69,6 +71,7 @@ <h1 id="title">Drum Kit</h1>
     </p>
   </footer>
 
+  </div>
   <script src="main.js"></script>
 
 </body>
diff --git a/01 - Drum Kit/style.css b/01 - Drum Kit/style.css
@@ -18,6 +18,7 @@ h1 {
   color: #FEFFE2;
   font-family: "Arvo", cursive;
   text-align: center;
+  margin-bottom: 0;
 }
 
 span {
@@ -28,7 +29,7 @@ span {
   display: flex;
   flex-wrap: wrap;
   flex: 1;
-  min-height: 40vh;
+  align-content: center;
   align-items: center;
   justify-content: center;
 }
@@ -40,7 +41,7 @@ span {
   font-size: 1.5rem;
   padding: 1rem .5rem;
   transition: all .07s ease;
-  width: 100px;
+  width: 78pt;
   text-align: center;
   color: white;
   background-color: #212121;
@@ -73,14 +74,17 @@ footer {
   text-align: center;
   color: white;
   font-size: 1.5rem;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
   margin-bottom: 0;
   padding: 5px;
 }
 
 footer a:visited {
   color: inherit;
+}
+
+#container{
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
