responsive

zhehuazhou · Jul 31, 2024 · 3fccec3 · 3fccec3
1 parent 74e3e4c
commit 3fccec3
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/_includes/archive-single_double.html b/_includes/archive-single_double.html
@@ -21,7 +21,6 @@
 .column {
   float: left;
   padding: 0px;
-  height: 240px;
 }
 
 .left {
@@ -48,6 +47,11 @@
   clear: both;
 }
 
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+  }
 }
 </style>
 
@@ -66,12 +70,12 @@
     {% endif %}
 
     <div class="row">
-      <div class="column left">
+      <div class="column left" style="background-color:#aaa;">
         {% if post.teaser %}
           <img src= "{{ post.teaser }}">
         {% endif %}
       </div>
-      <div class="column right">
+      <div class="column right" style="background-color:#bbb;">
         <font size="-1">
         <h2 class="archive__item-title" itemprop="headline">
           {% if post.link %}