Fix span overlap issues, image align

This commit is contained in:
kez 2022-08-05 16:35:55 -07:00 committed by kezzle
parent 1f1f91150f
commit 601bcc49c8

View File

@ -5,11 +5,9 @@
<div>
{% for child in this.pagination.items %}
<div class="my-3 w-100 border p-3">
<div class="h-100 d-flex">
<div class="bg-white border-0 col-sm-3 p-0 pr-4">
<picture>
<a href="{{ child.link }}"><img src="{{ child.cover | url }}" class="img-fluid" alt="{{ child.name }}"></a>
</picture>
<div class="h-100 d-flex align-items-stretch">
<div class="bg-white border-0 col-sm-3 p-0 pr-4 align-self-center">
<a href="{{ child.link }}" class="d-block"><img src="{{ child.cover | url }}" class="img-fluid" alt="{{ child.name }}"></a>
</div>
<div class="d-flex flex-column">
<div class="d-flex flex-row gap-10-px align-items-start">
@ -18,7 +16,7 @@
<a href="{{ child.link }}" title="{{ child.name }}" class="btn btn-outline-primary font-weight-600">{{ _("Trainer's guide") }}</a>
</div>
<span class="text-primary font-weight-600 my-2 font-size-18-px">{{ _('By {}').format(child.author) }}</span>
<span class="m-0 font-size-18-px col p-0">{{ child.description }}</span>
<span class="m-0 font-size-18-px p-0 flex-grow-1">{{ child.description }}</span>
<span class="text-muted font-weight-600 m-0 font-size-18-px">{{ _('Available in: {}').format(child.languages|join(', ')) }}</span>
</div>
</div>