Update mobile css

r-makarov · Sep 8, 2024 · 0b90b7f · 0b90b7f
1 parent 27ee148
commit 0b90b7f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/css/main.css b/css/main.css
@@ -132,8 +132,7 @@ body .main {
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
-  width: 700px;
-  padding-left: 50px;
+  width: 42vw;
 }
 body .main #summary-section {
   color: white;
@@ -173,9 +172,8 @@ body .main #summary-section li:before {
 }
 body .main #summary-section .links {
   display: flex;
-  justify-content: space-between;
+  justify-content: left;
   padding-bottom: 10px;
-  padding-right: 150px;
 }
 body .main #summary-section .links img {
   width: 42px;
@@ -294,7 +292,24 @@ img {
   height: 30px;
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 800px) {
+  #summary-section .name-surname {
+    font-size: 2.5em !important;
+  }
+  #summary-section ul {
+    font-size: 1em !important;
+  }
+  #summary-section .links img {
+    width: 30px !important;
+    height: 30px !important;
+  }
+  .main {
+    width: 100vw !important;
+    padding: 0 50px;
+    margin: 0;
+    padding-right: 0;
+    background-color: gray;
+  }
   .date {
     float: none !important;
   }

diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/main.scss b/css/main.scss
@@ -172,8 +172,8 @@ body {
         flex-direction: column;
         flex-wrap: nowrap;
         justify-content: flex-start;
-        width: 700px;
-        padding-left: 50px;
+        width: 42vw;
+        // padding-left: 50px;
 
         #summary-section {
             color: $main-color;
@@ -216,9 +216,9 @@ body {
 
             .links {
                 display: flex;
-                justify-content: space-between;
+                justify-content: left;
                 padding-bottom: 10px;
-                padding-right: 150px;
+                // padding-right: 150px;
                 img {
                     width: 42px;
                     height: 42px;
@@ -363,7 +363,32 @@ img {
     height: 30px;
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 800px) {
+
+    #summary-section {
+        .name-surname {
+            font-size: 2.5em !important;
+        }
+        ul {
+            font-size: 1em !important;
+        }
+        .links {
+            img {
+                width: 30px !important;
+                height: 30px !important;
+            }
+        }
+
+    }
+
+
+    .main {
+        width: 100vw !important;
+        padding: 0 50px;
+        margin: 0;
+        padding-right: 0;
+        background-color: gray;
+    }
     .date {
         float: none !important;
     }