From 3b4ae3e5982f0172cfaf45fbce7a847f34aaa780 Mon Sep 17 00:00:00 2001
From: Thomas Litfin <t.litfin@unsw.edu.au>
Date: Tue, 29 Jul 2025 18:03:05 +1000
Subject: [PATCH] fix landing page wrapping on small screens

---
 _includes/video-list-columns.html | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/_includes/video-list-columns.html b/_includes/video-list-columns.html
index 064b594..affc70c 100644
--- a/_includes/video-list-columns.html
+++ b/_includes/video-list-columns.html
@@ -1,9 +1,9 @@
-<div style="display: flex; gap: 20px; align-items: center;">
-    <div style="flex: 1;">
+<div class="video-list-container">
+    <div class="video-column">
       <iframe style="width: 100%; aspect-ratio: 560 / 315;" src="https://www.youtube.com/embed/{{ include.video_id }}" 
         frameborder="0" allowfullscreen></iframe>
     </div>
-    <div style="flex: 1;">
+    <div class="list-column">
       <ul>
         {% assign items = include.list | split: "|" %}
         {% for item in items %}
@@ -11,5 +11,25 @@
         {% endfor %}
       </ul>
     </div>
-  </div>
-  
\ No newline at end of file
+</div>
+  
+<style>
+.video-list-container {
+  display: flex; 
+  gap: 20px; 
+  align-items: center;
+}
+
+.video-column,
+.list-column {
+  flex: 1;
+}
+
+/* On small screens, stack columns vertically */
+@media (max-width: 800px) {
+  .video-list-container {
+    flex-direction: column;
+    align-items: stretch; /* so columns fill width */
+  }
+}
+</style>
\ No newline at end of file