itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Text with Image responsive

Browse Source
This commit is contained in:
itsfinniii
2026-03-20 21:18:59 +01:00
parent d5c8b166bc
commit 0d329d1e9c
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
astro/src/components/web/TextWithImage.astro
View File

@@ -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}