From b730e9c6db0d5aff62c64d6ee54a36a1d951a6ed Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 31 Jan 2024 17:09:52 +0100
Subject: [PATCH] Center align media elements in article template

Improved visual consistency in 'article.html' by adding 'justify-content-center' to each media row, ensuring images, videos, and iframes are centered within their containers. Additionally, applied 'wrap' class to text content for enhanced readability. These changes cater to better user engagement and a more polished layout presentation.
---
 templates/article.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/article.html b/templates/article.html
index 25f1cf2..08ace40 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -21,7 +21,7 @@
     </div>
 
     {% if step.imgs %}
-    <div class="row mb-3">
+    <div class="row mb-3 justify-content-center">
       {% for step_img in step.imgs %}
         <div class="col-md-3">
           <img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
@@ -31,7 +31,7 @@
     {% endif %}
 
     {% if step.videos %}
-    <div class="row mb-3">
+    <div class="row mb-3 justify-content-center">
       {% for step_video in step.videos %}
         <div class="col-md-3">
           <video src="{{ step_video }}" controls class="w-100"></video>
@@ -41,7 +41,7 @@
     {% endif %}
 
     {% if step.iframes %}
-    <div class="row mb-3">
+    <div class="row mb-3 justify-content-center">
       {% for step_iframe in step.iframes %}
         <div class="col-md-3 mb-3">
           <iframe src="{{ step_iframe.src }}" width="100%" height="{{ step_iframe.height }}"></iframe>
@@ -64,7 +64,7 @@
     {% endif %}
 
     <div class="row">
-      <div class="col-12 mb-3">
+      <div class="col-12 mb-3 wrap">
         {{ step.text|safe }}
       </div>
     </div>