changes for mid return

Lopputyö/portfolio.css

@@ -27,4 +27,43 @@
 .portfolio .row img:hover {
   filter: blur(1px);
   transition: ease-in-out 0.2s;
+}
+
+@media only screen and (max-width: 810px) {
+  .portfolio {
+    justify-content: center !important;
+    width: 100%;
+  }
+  .portfolio h1 {
+    font-size: 11vw !important;
+    margin: 0;
+  }
+  .portfolio img {
+    width: 23vw !important;
+    border-radius: 12px;
+  }
+  .portfolio .col {
+    margin: 0 2vw 0 2vw;
+    padding: 0;
+  }
+  .portfolio .row {
+    height: -moz-min-content !important;
+    height: min-content !important;
+    width: 100% !important;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .portfolio .row {
+    width: 110% !important;
+    overflow-x: scroll;
+    display: flex;
+  }
+  .portfolio .row .col {
+    width: auto !important;
+    height: auto !important;
+    margin: 0;
+  }
+  .portfolio .row img {
+    width: 40vw !important;
+  }
 }/*# sourceMappingURL=portfolio.css.map */
\ No newline at end of file

Lopputyö/portfolio.scss

@@ -31,4 +31,49 @@
     }
 
     // ------------------------------------------------RESPONSIVE SETTINGS
-    
\ No newline at end of file
+    @media only screen and (max-width: 960px) {
+        // none
+      }
+      
+      @media only screen and (max-width: 810px) {
+        $scale-tablet: 23vw;
+        .portfolio{
+            justify-content: center !important;
+            width: 100%;
+            h1{
+                font-size: 11vw !important;
+                margin: 0;
+            }
+            img{
+                width: $scale-tablet !important;
+                border-radius: 12px;
+            }
+            .col{
+                margin: 0 2vw 0 2vw;
+                padding: 0;
+            }
+            .row{
+                height: min-content !important;
+                width: 100% !important;
+            }
+        }
+      }
+      
+      @media only screen and (max-width: 400px) {
+        $scale-phone: 45vw;
+        .portfolio {
+            .row{
+                width: 110% !important;
+                overflow-x: scroll;
+                display: flex;
+                .col{
+                    width: auto !important;
+                    height: auto !important;
+                    margin: 0;
+                }
+                img{
+                    width: 40vw !important;
+                }
+            }
+            }
+      }
\ No newline at end of file

Lopputyö/style.css

@@ -244,6 +244,44 @@ section {
   transition: ease-in-out 0.2s;
 }
 
+@media only screen and (max-width: 810px) {
+  .portfolio {
+    justify-content: center !important;
+    width: 100%;
+  }
+  .portfolio h1 {
+    font-size: 11vw !important;
+    margin: 0;
+  }
+  .portfolio img {
+    width: 23vw !important;
+    border-radius: 12px;
+  }
+  .portfolio .col {
+    margin: 0 2vw 0 2vw;
+    padding: 0;
+  }
+  .portfolio .row {
+    height: -moz-min-content !important;
+    height: min-content !important;
+    width: 100% !important;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .portfolio .row {
+    width: 110% !important;
+    overflow-x: scroll;
+    display: flex;
+  }
+  .portfolio .row .col {
+    width: auto !important;
+    height: auto !important;
+    margin: 0;
+  }
+  .portfolio .row img {
+    width: 40vw !important;
+  }
+}
 .contact {
   display: flex;
   flex-direction: column;