Merge pull request '[11] Now viewport shows sensible number of images per row during resize. 4 images maximum with 1 image minimum' (#23) from 11-max-4 into develop

Reviewed-on: #23

src/photoDisplays/PhotoGrid.scss

@@ -1,13 +1,12 @@
 .photo-grid {
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     flex-direction: row;
     flex-wrap: wrap;
-    margin-left: 50px;
-    margin-right: 50px;
+
     .photo-grid-thumb-container {
-        max-width: 30%;
-        margin: 10px;
+        margin: 10px 0;
+        
         .photo-grid-thumb {
             position: relative;
             left: 50%;
@@ -17,4 +16,39 @@
             width: 100%;
         }
     }
+}
+
+@media only screen and (min-width: 1500px) {
+    .photo-grid {
+        .photo-grid-thumb-container {
+            width: 23%;
+        }
+    }
+}
+
+
+@media only screen and (max-width: 1499px) and (min-width: 1000px) {
+    .photo-grid {
+        .photo-grid-thumb-container {
+            width: 30%;
+        }
+    }
+}
+
+@media only screen and (max-width: 999px) and (min-width: 700px) {
+    .photo-grid {
+        .photo-grid-thumb-container {
+            width: 44%;
+        }
+    }
+}
+
+@media only screen and (max-width: 699px) {
+    .photo-grid {
+        .photo-grid-thumb-container {
+            
+            margin: 10px 10px 0 10px;
+            width: 100%;
+        }
+    }
 }

src/sections/Portfolio.jsx

@@ -1,4 +1,5 @@
 import PhotoGrid from '../photoDisplays/PhotoGrid';
+import './Portfolio.scss';
 
 const images = [{
     id: 0,

src/sections/Portfolio.scss

@@ -0,0 +1,6 @@
+@media only screen and (min-width: 700px) {
+    .portfolio-section {
+        padding-left: 100px;
+        padding-right: 100px;
+    }
+}