Responsive design

5 files changed, 53 insertions, 1 deletions

diff --git a/sass/components/_button.scss b/sass/components/_button.scss
index 2d5b50c..727d9fb 100644
--- a/sass/components/_button.scss
+++ b/sass/components/_button.scss
@@ -9,7 +9,7 @@ button {
   font-weight: bold;
   padding: 0.7rem;
   text-transform: uppercase;
-  width: 35%;
+  width: 8rem;
 
   &:hover {
     background-color: $text-special-dark;
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
index a2a9c40..87b79c1 100644
--- a/sass/components/_contact-form.scss
+++ b/sass/components/_contact-form.scss
@@ -38,3 +38,22 @@
     }
   }
 }
+
+// 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 {
+    @include flex-column-center;
+    width: 100%;
+
+    & div {
+      width: 100%;
+    }
+  }
+}
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index d6d4e68..ed5fb0d 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -4,3 +4,16 @@
   @include flex-sp-around-center;
   gap: 2rem;
 }
+
+// mobile to smaller laptop screen sizes
+@media screen and (max-width: 1380px) {
+  .project-container {
+    @include flex-column-center;
+    gap: 5rem;
+  }
+
+  // for second project, otherwise screenshot below text-container
+  .reverse-order {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
index 8c28462..f3fdf0b 100644
--- a/sass/components/_screenshot-container.scss
+++ b/sass/components/_screenshot-container.scss
@@ -13,3 +13,10 @@
     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 0108f94..95d2944 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -18,3 +18,16 @@
   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 {
+    animation: moveInRightMobile 2s ease-out;
+    margin-top: 5rem;
+  }
+}