🐛 Fix: Media Query Problems

amirzenoozi · Dec 22, 2023 · 3d1a856 · 3d1a856
1 parent 9890b1a
commit 3d1a856
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="theme-color" content="#342627" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta
       name="description"
       content="Personal Portfolio Website"

diff --git a/src/pages/home/style.scss b/src/pages/home/style.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
-    padding-bottom: px-to-rem(200);
+    padding-bottom: px-to-rem(100);
     box-sizing: border-box;
     overflow: hidden;
 
@@ -109,4 +109,8 @@
             left: 4vw;
         }
     }
+
+    @include respond-to(md) {
+        padding-bottom: px-to-rem(200);
+    }
 }
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -34,7 +34,7 @@
 // Responsive mixin
 @mixin respond-to($name) {
     @if(map-has-key($breakpoints, $name)) {
-        @media (min-width: #{inspect(map-get($breakpoints, $name))}) {
+        @media only screen and (min-width: #{inspect(map-get($breakpoints, $name))}) {
             @content;
         }
     }