Made 404 page fully responsive (#1451)

Rakesh9100 · Jan 12, 2025 · 1fa0ec2 · 1fa0ec2
1 parent db5d5dc
commit 1fa0ec2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/404.html b/404.html
@@ -82,10 +82,10 @@
         </nav>
     </header>
 
-    <section class="comp-section" id="404">
+    <section class="comp-section error-section">
         <div class="compcontainer">
             <div class="logo">
-                <img src="./assets/images/404.gif" alt="Logo" style="width: 640px !important; height: 450px !important; object-fit: cover; border-radius: 25px;">
+                <img src="./assets/images/404.gif" alt="Logo" id="error-img">
             </div>
             <a href="index.html">
                 <button class="started" style="margin-top: 32px;">Go Back Home</button>

diff --git a/style.css b/style.css
@@ -430,12 +430,13 @@ section {
 }
 
 .comp-section {
-    height: 100vh;
+    height: 80vh;
     display: grid;
     color: var(--secondary);
     justify-content: center;
     align-items: center;
     text-align: center;
+    z-index: 2;
 }
 
 .comp-section .compcontainer .logo img {
@@ -556,15 +557,6 @@ section {
     background: #b1c2d4;
 }
 
-.comp-section {
-    height: 80vh;
-    display: grid;
-    color: var(--secondary);
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    z-index: 2;
-}
 
 /* Container Section Css */
 
@@ -1018,6 +1010,19 @@ footer {
     text-align: center;
 }
 
+/* Error Page Css */
+
+.error-section {
+    height: 100vh;
+}
+
+#error-img {
+    width: 640px;
+    height: 450px;
+    object-fit: cover;
+    border-radius: 25px;
+}
+
 /* Media queries for responsiveness */
 
 @media (min-width: 769px) and (max-width: 855px) {
@@ -1033,6 +1038,13 @@ footer {
         height: 6rem;
         width: 50rem;
     }
+
+    #error-img {
+        width: 90vw;
+        height: auto;
+        object-fit: cover;
+        border-radius: 25px;
+    }
 }
 
 @media (max-width: 650px) {