Small media query adjustments

1 files changed, 20 insertions, 19 deletions

diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index 7cb2735..aec49e5 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -3,6 +3,12 @@
 .about-section {
   @include flex-sp-around-center;
   @include narrow-container;
+
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include flex-column-center;
+    @include mobile-container;
+  }
 }
 
 .welcome-section {
@@ -11,6 +17,13 @@
   @include narrow-container;
   width: 60%;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include flex-column-center;
+    gap: 4rem;
+    @include mobile-container;
+  }
+
   .welcome-intro {
     border-radius: $radius-text-container;
     outline: 3px solid $text-special-dark;
@@ -21,6 +34,11 @@
 .projects-section {
   @include wide-container;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    @include mobile-container;
+  }
+
   // less margin between h2 and the 2nd child = first project-container
   & > div:not(:nth-child(2)) {
     margin-top: 10rem;
@@ -29,26 +47,9 @@
 
 .contact-section {
   @include wide-container;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .about-section {
-    @include flex-column-center;
-    @include mobile-container;
-  }
-
-  .welcome-section {
-    @include flex-column-center;
-    gap: 4rem;
-    @include mobile-container;
-  }
-
-  .projects-section {
-    @include mobile-container;
-  }
 
-  .contact-section {
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
     @include mobile-container;
   }
 }