Improve mobile layout

themes/devroom-2020/assets/scss/devroom.scss

@@ -71,7 +71,7 @@ h1, h2, h3, h4, h5 {
     font-size: $header_size;
     font-weight: bold;
     font-variant: small-caps;
-    line-height: $header_size * 1.1;
+    line-height: $header_size * 1.7;
     color: $header;
     margin: 0.67rem 0;
 }
@@ -212,17 +212,22 @@ table td, table th {
     padding: 0.2rem 1rem;
 }
 
-.flex-columns {
-    display: flex; 
-    flex-direction: row;
-}
-
-.flex-column {
-    &#popular_posts {
-        order: 1;
+@media(min-width:768px) {
+    .flex-columns {
+        display: flex; 
+        // flex-direction: row;
+        flex-flow: row wrap;
     }
-    &#recent_posts {
-        order: 2;
+
+    .flex-column {
+        width: 50%;
+
+        &#popular_posts {
+            order: 1;
+        }
+        &#recent_posts {
+            order: 2;
+        }
     }
 }
 
@@ -252,4 +257,4 @@ img.about-avatar {
     color: $links;
   }
   
-  
+  

themes/devroom-2020/layouts/partials/home.html

@@ -33,5 +33,5 @@
             {{ end }}
             </ul>
         {{ end }}
-    </div>    
-</div>
+    </div>
+</div>