I encountered an issue while developing a blog app. The problem is that instead of resizing to fit the size of the card, the content is occupying the entire column space.
https://i.sstatic.net/CGRig.png
Here's the code snippet (Jinja2)
{% extends "base.html" %}
{% block title %}
Blogs - DevExplorer
{% endblock title %}
{% block content %}
<div class="container">
<div class="row no-gutters">
<div class="text-center">
<a href="{{ url_for('new_post') }}">
<button class="btn btn-primary btn-primary btn-lg rainbow-button">Post A New Blog</button>
</a>
<br><br><br>
</div>
<!-- Displaying the posts, if the database if empty telling the user to post a post -->
{% if posts.items != [] %}
{% for i in posts.items %}
<!-- Displaying the posts if exists -->
{% if i.thumbnail %}
<a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
<div class="col-auto">
<div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px;">
<div class="card-body" style="margin: 0; padding: 0;">
<img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP" width="32"
height="32"> {{ i.author.username }}
</div>
<br>
<span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
<img src="{{ i.thumbnail }}" alt="Image Support" style="border-radius: 25px;">
<br>
<h5 class="card-title" style="font-weight: 600;">
{{ i.title }}
</h5>
</div>
</div>
</a>
{% else %}
<a href="{{ url_for('post_detail', primary_key=i.id) }}" class="col-auto" style="text-decoration: none; color: white;">
<div class="col-auto">
<div class="card cards" style="box-shadow: 1px 1px 30px black; border: none; width: 612px;">
<div class="card-body" style="margin: 0; padding: 0;">
<img src="{{ url_for('static', filename='profile_pics/' ~ i.author.profile_picture) }}" alt="DP"
width="32" height="32"> {{ i.author.username }}
</div>
<br>
<span class="text-muted" style="margin-bottom: 10px;">Posted On: {{ i.date_posted.date() }}</span>
<br>
<h5 class="card-title" style="font-weight: 600;">
{{ i.title }}
</h5>
<p class="elipsis" style="height: 17rem;">
{{ i.content }}
</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
{% else %}
<!-- Messaging the user that no posts exists -->
<h1 style="font-weight: bolder; text-align: center;">No Posts Yet! Be the first to post one!</h1>
{% endif %}
</div>
<!-- Pagination -->
{% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
{% if page_num %}
{% if posts.page == page_num %}
<a class="btn btn-info" style="margin: 5px;" href="{{ url_for('list_posts', page=page_num) }}">{{ page_num }}</a>
{% else %}
<a class="btn btn-outline-info" style="margin: 5px;" href="{{ url_for('list_posts', page=page_num) }}">{{ page_num }}</a>
{% endif %}
{% else %}
...
{% endif %}
{% endfor %}
</div>
<br><br>
{% endblock content %}
I attempted to use col-auto to resolve the issue, but it still persists and distorts the page layout. Any assistance would be highly appreciated!