From af0986a9f7f0a728656f56f421ed9377e3bea917 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Fri, 6 Feb 2026 18:54:41 +0100
Subject: [PATCH] SubtitledImage now responsive for mobile screen width

---
 src/lib/components/subtitled-image.svelte | 48 ++++++++++++++---------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte
index 94ac110..95004ff 100644
--- a/src/lib/components/subtitled-image.svelte
+++ b/src/lib/components/subtitled-image.svelte
@@ -55,25 +55,6 @@
         margin-right: auto;
     }
 
-    .subtitled-img-container-left, .subtitled-img-container-right {
-        width: 34%;
-    }
-
-    /* Don't limit height of images set to the side because text flows around them */
-    .subtitled-img-container-left img, .subtitled-img-container-right img {
-        max-height: initial;
-    }
-
-    .subtitled-img-container-left {
-        float: left;
-        margin-right: 16px;
-    }
-
-    .subtitled-img-container-right {
-        float: right;
-        margin-left: 16px;
-    }
-
     .subtitled-img-container:hover {
         background-color: var(--color-background-highlight)
     }
@@ -109,4 +90,33 @@
         color: var(--color-text-secondary);
         margin: 0;
     }
+
+    @media screen and (max-width: 600px) {
+        .subtitled-img-container-left, .subtitled-img-container-right {
+            width: var(--media-width);
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        .subtitled-img-container-left, .subtitled-img-container-right {
+            width: 34%;
+        }
+
+        /* Don't limit height of images set to the side because text flows around them */
+        .subtitled-img-container-left img, .subtitled-img-container-right img {
+            max-height: initial;
+        }
+
+        .subtitled-img-container-left {
+            float: left;
+            margin-right: 16px;
+        }
+
+        .subtitled-img-container-right {
+            float: right;
+            margin-left: 16px;
+        }
+    }
 </style>
\ No newline at end of file