Fixes Minor Responsiveness Issues

src/app/home/home.component.css

@@ -117,3 +117,24 @@
     font-size: 1rem;
     font-weight: 100;
 }
+
+.stack-slider {
+    height: 65%;
+}
+
+
+/*ON MOBILE VIEWPORT*/
+@media only screen and (max-width: 400px) {
+    .intro {
+        height: 75%;
+    }
+
+    .stack-section {
+        height: 100vh;
+    }
+    .stack {
+        padding-top: 60px;
+        width: 80%;
+        height: 30%;
+    }
+}

src/app/home/home.component.ts

@@ -12,7 +12,7 @@ export class HomeComponent {
         element.scrollIntoView({
             behavior: "smooth",
             block: "start",
-            inline: "nearest"
+            inline: "start"
         });
     }
 }

src/app/home/stack-slider/stack-card/stack-card.component.css

@@ -1,5 +1,8 @@
 .stack-card {
-    width: 300px;
+    width: 325px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     border-radius: 15px;
 }
@@ -44,6 +47,6 @@
 
 .inactive {
     opacity: 0.7;
-    width: 300px;
+    width: 280px;
     height: 410px;
 }

src/app/home/stack-slider/stack-card/stack-card.component.ts

@@ -10,12 +10,12 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
         trigger('cardAnimation', [
             state('active', style({
                 opacity: 1,
-                width: '350px',
+                width: '325px',
                 height: '425px',
             })),
             state('inactive', style({
                 opacity: 0.7,
-                width: '300px',
+                width: '280px',
                 height: '410px',
             })),
             transition('* => *', [