Media Queries for 800px done

masaka222 · Oct 2, 2018 · 75dcb7e · 75dcb7e
1 parent ae66381
commit 75dcb7e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -133,6 +133,6 @@ body{
 
 @media only screen and (max-width: 50em){
     .container{
-      grid-template-rows: 6rem calc(100vh - 6rem) min-content min-content 40vw repeat(3, min-content); 
+      grid-template-rows: 6rem calc(100vh - 6rem); 
     }
 }
diff --git a/src/StoryContent.css b/src/StoryContent.css
@@ -7,4 +7,11 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
+}
+
+@media only screen and (max-width: 50em){
+    .story__content{
+        grid-column: 1 / -1;
+        grid-row: 5 / 6;
+    }    
 }
diff --git a/src/StoryPictures.css b/src/StoryPictures.css
@@ -8,7 +8,7 @@
     align-items: center;
 
     background-image: linear-gradient(rgba(198,153,99, .5), rgba(198,153,99, .5)), url('./img/back.jpg');
-
+    background-size: cover;
 }
 
 .story__img--1{
@@ -24,4 +24,19 @@
     grid-column: 4 / 7 ;
     grid-row: 4 / 6;
     z-index: 10;
+}
+
+@media only screen and (max-width: 50em){
+    .story__pictures{
+        grid-column: 1 / -1;
+        padding: 6rem;
+    }    
+    .story__img--1{
+        grid-column: 1 / 5 ;
+        grid-row: 1 / -1;
+    }
+    .story__img--2{
+        width: 100%;
+        grid-row: 1 / -1;
+    }
 }