responsive CSS

static/css/base.css

@@ -1,39 +1,101 @@
+html {
+  margin: 0;
+  padding: 0;
+}
 body {
   text-rendering: optimizelegibility;
   -moz-text-size-adjust: none;
-  margin: 0px;
+  margin: 0;
+  padding: 0;
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
+
 .crunkcolumns {
   display: grid;
   grid-auto-flow: column;
-  grid-gap: 1px;
-  grid-template-columns: repeat(auto-fill, 336px);
-  margin-left: 6px;
+  grid-gap: 0.3em;
+  grid-template-columns: fit-content(24%);
+  height: 100%;
+  min-height: 99%;
+  max-height: 100%;
+  width: 99%;
+  justify-content: center;
+  margin-bottom: 1em;
+  float: left;
+  object-fit: contain;
 }
 
 .feed {
-  grid-template-columns: inherit;
+  width: 23em;
+  height: 94vh;
 }
 
+.feeditems {
+  height: 92%;
+  overflow-y: scroll;
+  border-bottom: 1px solid black;
+}
 .feeditem {
   display: flex;
-  width: 336px;
   position: relative;
   flex-direction: column;
   box-sizing: border-box;
   border: 1px solid black;
-  margin-top: 1px;
-  padding: 3px;
+  margin-top: 0.2em;
+  padding: 1em;
+  vertical-align: top;
 }
 
 .feeditem h2, p{
-  margin-bottom: 3px;
-  margin-top: 3px;
+  margin-bottom: 1em;
+  margin-top: 0.5em;
 }
 .feeditem p a {
   word-break: break-all;
 }
-img {
-    max-width: 100%;
-    max-height: 100%;
+/* Normalise section, things that css should always do but doesn't */
+a {
+  display: inline-block;
+  background-color: transparent;
+}
+img {
+  border-style: none;
+  max-width: 100%;
+  max-height: 100%;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 700px) {
+  .crunkcolumns {
+    display: block;
+  }
+  .feed {
+    width: 98%;
+    height: inherit;
+  }
+  .feeditems {
+    height: inherit;
+    overflow-y: visible;
+  }
+}
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 700px) and (max-width: 1365px) {
+  .crunkcolumns {
+    position: relative;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: row;
+    margin: 1em;
+  }
+  .feed {
+    height: inherit;
+    width: 48vw;
+  }
+  .feeditems {
+    height: inherit;
+    overflow-y: visible;
+  }
 }

templates/index.html

@@ -10,12 +10,14 @@
   {% for column in columns %}
   <div class="feed {{ column.title.replace(' ', '') }}">
     <h1>{{ column.title }}</h1>
+    <div class="feeditems">
     {% for feedtitle, text in column.entries.items() %}
       <div class="feeditem" id="{{ column.title.replace(' ', '') + '_' + feedtitle.replace(' ', '') }}">
         <h2>{{ feedtitle }}</h2>
         <div>{{ text[0]|safe }}</div>
       </div>
     {% endfor%}
+    </div>
   </div>
   {% endfor%}
 </div>