Merge pull request #469 from eiva078/alignment

Fix Misaligned Elements on Small Screens
ChromeGaming · Jul 8, 2024 · 43f9256 · 43f9256
2 parents 03c7f83 + 0799c8c
commit 43f9256
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 67 deletions.
diff --git a/pages/404.html b/pages/404.html
@@ -1,67 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>404:Page not found</title>
-    <link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon">
-</head>
-<style>
-    body{
-        margin: 0;
-        padding: 0;
-        font-family: Arial, sans-serif;
-        background-color: #f6f6f6;
+    <link
+      rel="shortcut icon"
+      href="../assets/favicon.ico"
+      type="image/x-icon"
+    />
+  </head>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: Arial, sans-serif;
+      background-color: #f6f6f6;
     }
     .center {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 90vh;
-
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 90vh;
     }
-    .pic{
-        width: 700px;
-        height: 700px;
-        animation: updown 2s ease-in-out infinite alternate;
+    .pic {
+      width: 700px;
+      height: 700px;
+      animation: updown 2s ease-in-out infinite alternate;
     }
     @keyframes updown {
-        from{
-            transform: translateY(0);
-        }
-        to{
-            transform: translateY(20px);
-        }
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(20px);
+      }
     }
-    a{
-        text-decoration: none;
-        color: #353535;
+    a {
+      text-decoration: none;
+      color: #353535;
     }
-    .btn{
-        position: absolute;
-        padding: 10px 20px;
-        background-color: #32ddaac9;
-        border-radius: 5px;
-        font-size: 20px;
-        font-weight: bold;
-        border: none;
-        top: 600px;
+    .btn {
+      position: absolute;
+      padding: 10px 20px;
+      background-color: #32ddaac9;
+      border-radius: 5px;
+      font-size: 20px;
+      font-weight: bold;
+      border: none;
+      top: 600px;
     }
     @media screen and (max-width: 600px) {
-        .pic{
-            width: 300px;
-            height: 300px;
-        }
-        .btn{
-            top: 400px;
-        }
+      .pic {
+        width: 300px;
+        height: 300px;
+      }
+      .btn {
+        top: 400px;
+      }
     }
-</style>
-<body>
+  </style>
+  <body>
     <div class="center">
-        <img src="../assets/images/404pic.png" alt="404 pic" class="pic">
-        <button class="btn"><a href="../index.html">Home</a></button>
+      <img src="../assets/images/404pic.png" alt="404 pic" class="pic" />
+      <button class="btn"><a href="../index.html">Home</a></button>
     </div>
-</body>
-</html>
+  </body>
+</html>
diff --git a/styles/index.style.css b/styles/index.style.css
@@ -105,17 +105,20 @@ h1::-webkit-scrollbar {
   letter-spacing: 0.8px;
   word-spacing: -1.8px;
 }
+
 input:out-of-range {
   border: 5px solid red;
 }
-input:out-of-range + .error::after {
+
+input:out-of-range+.error::after {
   content: "Please enter value between 5 and 30";
   font-size: 12px;
   font-style: italic;
   font-family: sans-serif;
   color: hsl(0, 100%, 40%);
 }
-input:out-of-range + .player::after {
+
+input:out-of-range+.player::after {
   content: "Please enter value between 2 and 6";
   font-size: 12px;
   font-style: italic;
@@ -143,6 +146,7 @@ input:out-of-range + .player::after {
   color: #fff;
   padding: 10px;
 }
+
 /* .author p{
 	align-items: center;
 	display: inline-block;
@@ -166,18 +170,36 @@ input:out-of-range + .player::after {
 .author p {
   color: white;
   padding: 10px;
-  margin-right: 40px;
+  margin-right: 10px;
   font-size: 20px;
   font-weight: 600;
 }
 
 .author .social-icons {
   display: flex;
   gap: 10px;
-  margin-right: 200px;
+  margin-right: 20px;
 }
+
 .author .social-icons a {
   color: white;
   text-decoration: none;
   font-size: 20px;
 }
+
+@media screen and (max-width:1190px) {
+  .author a {
+    font-size: small;
+  }
+}
+
+@media screen and (max-width:1065px) {
+  .author .fotbar {
+    gap: 5px;
+  }
+
+  .author {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}