PrivateCoffee/structables
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Center align media elements in article template

Browse source 
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.
This commit is contained in:
Kumi 2024-01-31 17:09:52 +01:00
parent 9dd8f4e2e0
commit b730e9c6db
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/article.html
View file

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