Add flexbox styling to bread.html

1 files changed, 25 insertions, 6 deletions

diff --git a/src/css/styles.css b/src/css/styles.css
index b8bc0aa..4ac97ca 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -25,19 +25,38 @@ img {
 
 .card {
     margin: 3em;
-    border: 1px solid #777777;
+    padding: 2%;
+    border: 1px solid #aaaaaa;
+    /* width: 400px; */
+    display: inline;
+    /* flex-direction: column; */
 }
 
 .card img {
-    width: 43%;
-    display: inline;
-    margin-left: auto;
-    margin-right: 3em;
+    width: 100%;
+    padding: 2%;
+    /* display: inline; */
+    /* margin-left: auto;
+    margin-right: 3em;    */
 }
 
 .feed {
-    width: 80%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+}
+
+@media screen and (min-width: 900px) {
+    .card-img {
+        display: flex;
+        flex-flow: row wrap;
+        align-content: flex-start;
+    }
+    .card img {
+        width: 400px;
+    }
 }
+  
 
 .sidebar {
     height: 100vh;