Update templates/index.html

templates/index.html

@@ -50,10 +50,17 @@
             width: 80vw;
         }
 
-        .feed-wrapper, .info {
+        .feed-wrapper {
+          width: 100%;
+          padding-top: 75%; /* 4:3 Aspect Ratio */
+          position: relative; /* If you want text inside of the container to be aligned to the bottom */
+        }
+
+        .feed, .info {
           flex: 1;
+          max-width: 50%; /* Limit each to half the container's width */
         }
-        
+      
         .feed-wrapper {
             padding: 1%;
             border-style: solid;
@@ -67,8 +74,8 @@
           position: absolute;
           top: 0;
           left: 0;
-          width: 100%;
-          height: 100%;
+          bottom: 0;
+          right: 0;
           object-fit: contain;
         }
       
@@ -92,9 +99,14 @@
             flex-direction: column;
             align-items: center;
           }
-          .feed-wrapper, .info {
-            width: 90%;  /* full width for mobile */
-            flex: none;  /* reset flex for mobile */
+          
+          .feed, .info {
+            max-width: 100%; /* Allow them to take up the entire width */
+            width: 90%; /* Set width to 90% of the container */
+          }
+          
+          .feed-wrapper {
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
           }
         }