Adaption to different screen sizes

SoupleCodes · May 3, 2024 · ceb77e0 · ceb77e0
1 parent 3c0b393
commit ceb77e0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE HTML>
-<html>
+<html lang "en">
 <head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, intitial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="https://www.pngall.com/wp-content/uploads/2018/04/Soup-PNG-File.png" />
-  <meta charset="utf-8">
   <title>Home | Souple</title>
 </head>
 

diff --git a/styles.css b/styles.css
@@ -1,45 +1,63 @@
 body {
     margin: 0;
     padding: 0;
-    overflow: hidden;
+    overflow-x: hidden;  /* Allow vertical scroll but hide horizontal overflow */
     background: rgba(254, 234, 164);
-}
-
-.background {
+  }
+  
+  .background {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1; /* Set z-index to move behind other elements */
+    width: 100vw; 
+    height: 100vh;
+    z-index: -1;
     background-image: url("../images/EZZE Design Image.png");
     background-size: cover;
-}
-
-header {
-    position: relative; /* Ensure position:relative for z-index to work */
-    z-index: 1; /* Set z-index higher than the background */
-}
-
-/* Additional styling for header elements */
-header center {
+  }
+
+  header {
     position: relative;
-    z-index: 1;
-}
-
-  /* Additional styling for header elements */
-header nav {
-    position: relative;
-    z-index: 1;
-}
-img {
+    padding: 28px;
+  }
+
+  header center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  header nav {
+    display: flex; 
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+
+  nav a {
+    padding: 20px;
+  }
+
+  img {
     display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: -120px;
-}
-#logo {
+    margin: 0 auto;
+    z index = -1
+  }
+  
+  #logo {
     position: absolute;
-    top: 134px;
-    left: 316px;
-}
+    top: 20px;
+    left: 14%;
+    transform: translateX(-50%);
+    max-width: 15%; 
+  }
+
+  /* Media Queries for smaller screens */
+
+  @media only screen and (max-width: 768px) {
+    header {
+      text-align: center;
+    }
+
+    #logo {
+      top: 10px;}
+  }