Fix phone website and media queries

1 files changed, 15 insertions, 2 deletions

diff --git a/assets/scss/web/_skills.scss b/assets/scss/web/_skills.scss
index 21e9ce3..80f1202 100644
--- a/assets/scss/web/_skills.scss
+++ b/assets/scss/web/_skills.scss
@@ -14,7 +14,14 @@
   min-width: 14%;
   text-align: right;
   font-weight: 900;
-  @media screen and (max-width: 780px) {
+
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 1rem;
+    }
+  }
+
+  @media (max-width: 680px) {
     text-align: left;
   }
 }
@@ -25,7 +32,13 @@
   margin-left: 25px;
   font-size: 0.9rem;
 
-  @media screen and (max-width: 780px) {
+  @media (max-width: 812px) {
+    @media (orientation: landscape) {
+      font-size: 0.6rem;
+    }
+  }
+
+  @media (max-width: 680px) {
     margin-bottom: 1rem;
     width: 100%;
   }