Mobile-friendly design

src/App.svelte

@@ -41,6 +41,8 @@
 </main>
 
 <style>
+  /* desktop style */
+ 
   #Content {
     display: flex;
     /* split the screen in half, left for accounts, right for posts */
@@ -93,4 +95,36 @@
     font-size: 2em;
     margin-bottom: 20px;
   }
+
+    /* mobile style */
+    @media screen and (max-width: 600px) {
+    #Content {
+      flex-direction: column;
+      width: auto;
+      padding-left: 0px;
+      padding-right: 0px;
+      margin-top: 5%;
+    }
+    #Account {
+      width: auto;
+      padding-left: 5%;
+      padding-right: 5%;
+      margin-bottom: 20px;
+      margin-left: 5%;
+      margin-right: 5%;
+      height: auto;
+    }
+    #Feed {
+      width: 95%;
+      margin: 0px;
+      margin-left: 10%;
+      margin-right: 10%;
+      padding: 0px;
+      height: auto;
+    }
+
+    #spacer {
+      height: 0;
+    }
+  }
 </style>

src/lib/PostComponent.svelte

@@ -222,14 +222,6 @@
     margin-left: 0px;
     border-right: #8054f0 1px solid;
   }
-  #embedImages {
-    min-width: 500px;
-    max-width: 500px;
-    max-height: 500px;
-    object-fit: contain;
-
-    margin: 0;
-  }
   #carouselContainer {
     position: relative;
     width: 100%;
@@ -281,4 +273,13 @@
     margin-top: 10px;
     align-self: center;
   }
+
+  #embedImages {
+    min-width: min(100%, 500px);
+    max-width: min(100%, 500px);
+    max-height: 500px;
+    object-fit: contain;
+
+    margin: 0;
+  }
 </style>