From 4bf29074077bb95296e7a0091fe89e59818539f9 Mon Sep 17 00:00:00 2001
From: samuellvo <112153663+samuellvo@users.noreply.github.com>
Date: Wed, 9 Aug 2023 22:52:59 -0700
Subject: [PATCH] Update responsiveness

Has an okay general responsiveness for mobile devices now, both landscape and portrait. Should fix later.

A lot of messy code here as I get better at basic frontend.
---
 STYLES.CSS | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/STYLES.CSS b/STYLES.CSS
index 9013615..665b4a7 100644
--- a/STYLES.CSS
+++ b/STYLES.CSS
@@ -197,7 +197,6 @@ img.logo:hover{
     animation-iteration-count: 1;
 }
 .containerTestItem {
-    align-items: center;
     flex: 1 1 100px;
     margin: auto;
     display: flex;
@@ -218,6 +217,7 @@ img.logo:hover{
     color:black;
     text-decoration: none;
 }
+    
 .topnav div {
     flex: 1 1 0;
 }
@@ -396,8 +396,38 @@ h1{
     padding-left: 2vw; padding-right: 2vw;
 }
 }
-/* Phones  */
-@media only screen and (max-height: 700px) and (orientation:portrait){
+/* mobile devices portrait  */
+@media only screen and (max-height: 1370px ) and (orientation:portrait){
+    .bigText{
+        margin-top: 0%;
+        font-size: 4vh;
+    }
+    #aboutMeTop {
+        max-height: 5vh;
+    }
+    #aboutMeHey, #aboutMeHeader {
+        font-size: 1.6vh;
+    }
+    #biography {
+        font-size: 2.2vh;
+    }
+    .CTIText {
+        font-size: 2vh;
+    }
+    .socials {
+        max-height: 400vh;
+        max-width: 400vw;
+    }
+    .socialsAnimation {
+        max-height: 400vh;
+        max-width: 400vw;
+    }
+    .socialsAnimation p {
+        font-size: 10vw;
+    }
+    .colorstrip2 p {
+        font-size: 1vh;
+    }
     .console { height: 58vh; width: 80vw;
     border-radius: 5%;
     z-index: 100;