Merge pull request #8 from pselfin/rsschool-cv-html

fix: css mobile
pselfin · Jul 4, 2024 · f83eafb · f83eafb
2 parents e3915a9 + 91798bb
commit f83eafb
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 12 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/scss/styles.scss b/scss/styles.scss
@@ -1,23 +1,34 @@
+@mixin row {
+    display: flex;
+    align-items: center;  
+    max-width: 600px;
+    margin: 0 auto;
+    justify-content: space-around;
+}
+
+
+
+
 body {
     margin: 0;
     scroll-behavior: smooth;
+    box-sizing: border-box;
 }
 
 header {
 
     background-color: blue;
+    width: 100%;
 
     .row {
-        display: flex;
-        margin: 0 auto;
-        max-width: 600px;
-        justify-content: space-around;
+        @include row;
     }
 
     ul {
         display: flex;
         margin: 0;
         align-content: baseline;
+        flex-direction: row;
 
         li {
             padding: 10px 15px;
@@ -48,10 +59,12 @@ header {
 main {
     margin: 0 auto;
     max-width: 600px;
+    padding: 0 10px;
 
     div.row {
         display: flex;
         gap: 20px;
+        flex-direction: column;
     }
 }
 
@@ -65,14 +78,11 @@ pre {
 footer {
     color: #fff;
     background-color: gray;
-    padding: 15px 0;
+    padding: 15px;
 
     .row {
-        display: flex;
-        align-items: center;  
-        max-width: 600px;
-        margin: 0 auto;
-        justify-content: space-around;
+        @include row;
+
     }
 
     a {color: #fff;}
@@ -82,4 +92,33 @@ footer {
         height: auto;
 
     }
+}
+
+@media (max-width:600px) {
+    @mixin row {
+        display: flex;
+        align-items: center;  
+        min-width: 320px;
+        margin: 0 auto;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    main {
+        min-width: 320px;
+        padding: 0 10px;
+    }
+
+    .logo {display: none;}
+
+    header {
+        ul {flex-direction: column;}
+    }
+    footer {    
+        .row {
+            @include row;
+
+        }
+    }
 }