diff --git a/src/photoDisplays/PhotoGrid.scss b/src/photoDisplays/PhotoGrid.scss index 72099c7..5c15cab 100644 --- a/src/photoDisplays/PhotoGrid.scss +++ b/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%; + } + } } \ No newline at end of file diff --git a/src/sections/Portfolio.jsx b/src/sections/Portfolio.jsx index 1fc3c14..8daea75 100644 --- a/src/sections/Portfolio.jsx +++ b/src/sections/Portfolio.jsx @@ -1,4 +1,5 @@ import PhotoGrid from '../photoDisplays/PhotoGrid'; +import './Portfolio.scss'; const images = [{ id: 0, diff --git a/src/sections/Portfolio.scss b/src/sections/Portfolio.scss new file mode 100644 index 0000000..bf4793f --- /dev/null +++ b/src/sections/Portfolio.scss @@ -0,0 +1,6 @@ +@media only screen and (min-width: 700px) { + .portfolio-section { + padding-left: 100px; + padding-right: 100px; + } +} \ No newline at end of file