Small media query adjustments

4 files changed, 19 insertions, 24 deletions

diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index 87b79c1..1195ab7 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -5,6 +5,11 @@
   gap: 2rem;
   width: 50%;
 
+  // larger tablet to smaller laptop screen size
+  @include responsive(laptop) {
+    width: 100%;
+  }
+
   // container for each label & input
   div {
     display: flex;
@@ -39,13 +44,6 @@
   }
 }
 
-// larger tablet to smaller laptop screen size
-@media screen and (max-width: 1380px) {
-  .messenger-form {
-    width: 100%;
-  }
-}
-
 // mobile to smaller tablet screen sizes
 @media screen and (max-width: 820px) {
   .messenger-form {
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index ed5fb0d..0bb8940 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -6,7 +6,7 @@
 }
 
 // mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
+@media screen and (max-width: 1400px) {
   .project-container {
     @include flex-column-center;
     gap: 5rem;
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index f3fdf0b..beaa0cd 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -8,15 +8,13 @@
   width: 40%;
   transition: transform 0.6s ease;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    width: 80%;
+  }
+
   &:hover {
     transform: scale(1.2);
     z-index: 100;
   }
 }
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .project-screenshot {
-    width: 80%;
-  }
-}
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 95d2944..6cd1457 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -8,6 +8,12 @@
   transform: skewX(-12deg);
   width: 50%;
 
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
+    transform: skewX(0);
+    width: auto;
+  }
+
   // margin between paragraphs but not below the last paragraph
   & p:not(:last-child) {
     margin-bottom: 1.5rem;
@@ -17,16 +23,9 @@
 .text-about {
   animation: moveInRight 2s ease-out;
   backface-visibility: hidden;
-}
-
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1380px) {
-  .text-container {
-    transform: skewX(0);
-    width: auto;
-  }
 
-  .text-about {
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
     animation: moveInRightMobile 2s ease-out;
     margin-top: 5rem;
   }