style: 💄 footer media queries

jaskaransarkaria · Feb 8, 2022 · 603c733 · 603c733
1 parent af2c219
commit 603c733
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 46 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,24 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
+    />
     <title>Enki</title>
-
-    <link rel='icon' type='image/png' href='/enki_icon.jpg'>
-    <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1644339779240.css'>
-    <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">
-
-    <script defer src='/build/bundle-1644339779240.js'></script>
+
+    <link rel="icon" type="image/png" href="/enki_icon.jpg" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle-1644339779240.css" />
+    <link
+      href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+
+    <script defer src="/build/bundle-1644339779240.js"></script>
   </head>
-  <body>
-  </body>
-</html>
+  <body></body>
+</html>
diff --git a/src/components/Footer/Footer.svelte b/src/components/Footer/Footer.svelte
@@ -168,22 +168,36 @@
 
   @media (min-width: 600px) {
     .footer {
-      height: 15vh;
+      height: 60vh;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .footer {
+      height: 40vh;
       position: absolute;
       bottom: -225px;
     }
 
     .right-container {
       margin-right: 1%;
+      flex-direction: column;
+      justify-content: center;
     }
 
     .trust-container {
-      width: 80%;
+      width: 100%;
     }
 
     .enki-icon {
       width: 180px;
       height: auto;
     }
   }
+
+  @media (min-width: 2400px) {
+    .footer {
+      height: 15vh;
+    }
+  }
 </style>
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
@@ -130,7 +130,6 @@
   }
 
   .inside-shop {
-    width: 100vw;
     z-index: -1;
     grid-column-start: 1;
     grid-column-end: span end;
@@ -152,32 +151,32 @@
 
   @media (min-width: 450px) {
     .contact {
-      width: 50px;
-      grid-column-start: 70;
+      width: 90px;
+      grid-column-start: 84;
       grid-column-end: span end;
-      grid-row-start: 50;
+      grid-row-start: 62;
       grid-row-end: span end;
     }
 
     .online-shop {
-      width: 70px;
-      grid-column-start: 38;
+      width: 120px;
+      grid-column-start: 25;
       grid-column-end: span end;
-      grid-row-start: 43;
+      grid-row-start: 45;
       grid-row-end: span end;
     }
 
     .repairs-and-comms {
-      width: 70px;
-      grid-column-start: 12;
+      width: 90px;
+      grid-column-start: 2;
       grid-column-end: span end;
       grid-row-start: 5;
       grid-row-end: span end;
     }
 
     .classes {
-      width: 70px;
-      grid-column-start: 66;
+      width: 90px;
+      grid-column-start: 80;
       grid-column-end: span end;
       grid-row-start: 5;
       grid-row-end: span end;
@@ -186,18 +185,18 @@
 
   @media (min-width: 600px) {
     .contact {
-      width: 80px;
-      grid-column-start: 70;
+      width: 100px;
+      grid-column-start: 80;
       grid-column-end: span end;
-      grid-row-start: 50;
+      grid-row-start: 60;
       grid-row-end: span end;
     }
 
     .online-shop {
-      width: 100px;
-      grid-column-start: 37;
+      width: 120px;
+      grid-column-start: 32;
       grid-column-end: span end;
-      grid-row-start: 43;
+      grid-row-start: 45;
       grid-row-end: span end;
     }
 
@@ -211,43 +210,43 @@
 
     .classes {
       width: 100px;
-      grid-column-start: 66;
+      grid-column-start: 77;
       grid-column-end: span end;
-      grid-row-start: 1;
+      grid-row-start: 5;
       grid-row-end: span end;
     }
   }
 
   @media (min-width: 800px) {
     .contact {
       width: 100px;
-      grid-column-start: 70;
+      grid-column-start: 72;
       grid-column-end: span end;
-      grid-row-start: 50;
+      grid-row-start: 60;
       grid-row-end: span end;
     }
 
     .online-shop {
       width: 120px;
-      grid-column-start: 38;
+      grid-column-start: 36;
       grid-column-end: span end;
-      grid-row-start: 43;
+      grid-row-start: 45;
       grid-row-end: span end;
     }
 
     .repairs-and-comms {
       width: 120px;
-      grid-column-start: 12;
+      grid-column-start: 10;
       grid-column-end: span end;
-      grid-row-start: 5;
+      grid-row-start: 3;
       grid-row-end: span end;
     }
 
     .classes {
       width: 120px;
-      grid-column-start: 66;
+      grid-column-start: 70;
       grid-column-end: span end;
-      grid-row-start: 1;
+      grid-row-start: 4;
       grid-row-end: span end;
     }
   }
@@ -307,15 +306,15 @@
       width: 180px;
       grid-column-start: 12;
       grid-column-end: span end;
-      grid-row-start: 5;
+      grid-row-start: 2;
       grid-row-end: span end;
     }
 
     .classes {
       width: 180px;
-      grid-column-start: 66;
+      grid-column-start: 69;
       grid-column-end: span end;
-      grid-row-start: 5;
+      grid-row-start: 1;
       grid-row-end: span end;
     }
   }