From 0d329d1e9c8708689f3475481631b61b2a877590 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Fri, 20 Mar 2026 21:18:59 +0100
Subject: [PATCH] Make Text with Image responsive

---
 astro/src/components/web/TextWithImage.astro | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/astro/src/components/web/TextWithImage.astro b/astro/src/components/web/TextWithImage.astro
index 98ee1eb..d56b4dd 100644
--- a/astro/src/components/web/TextWithImage.astro
+++ b/astro/src/components/web/TextWithImage.astro
@@ -15,14 +15,17 @@ const imageSize = () => {
 }
 ---
 
-<div id={`textwithimage-${textWithImage.id}`} class={`flex ${textWithImage.imageSide === "right" ? "flex-row" : "flex-row-reverse"} justify-between items-center py-12 px-12 container mx-auto gap-y-8 gap-x-18`}>
-    <div class="flex flex-col gap-2.5 w-[50%]">
+<div
+    id={`textwithimage-${textWithImage.id}`}
+    class={`flex ${textWithImage.imageSide === "right" ? "lg:flex-row flex-col" : "lg:flex-row-reverse flex-col"} justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18`}
+>
+    <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
         <h2 class="text-5xl font-bold">{textWithImage.title}</h2>
         { textWithImage.text !== null && (
             <div set:html={markdownToHtml(textWithImage.text)}></div>
         ) }
     </div>
-    <div class="w-[50%]">
+    <div class="lg:w-[50%] w-full">
         <Image
             src={textWithImage.image.url}
             width={textWithImage.image.width}