Django view template responsiveness - html

Question

I am trying to work on the responsiveness of my django application on mobile view. So here is our it looks on a smaller screen size
So I want to remove all the white space that I have marked in blue, which is supposed to separate one post from the next. Here is the code snippet associated with that section
<section class="category-section">
<div class="container" data-aos="fade-up">
<div class="section-header d-flex justify-content-between align-items-center mb-5">
<h2>Politics</h2>
<div>See All Politics</div>
</div>
<div class="row">
{% for politic in politics%}
{% if forloop.counter < 11 %}
<div class="post-entry-1 col-lg-2 col-md-6 col-xs-12 mx-1">
<img src="{{politic.image.url}}" alt="" class="post_img img-fluid">
<div class="post-meta float-right">
<span class="date">{{politic.category}}</span>
<span class="mx-1">&bullet;</span>
<span>{{politic.created_at}}</span>
</div>
<h2 class="mb-2">{{politic.title}}</h2>
<span class="author mb-3 d-block">Ole Pundit</span>
<p class="mb-4 d-block">{{politic.body| safe | truncatewords:15}}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
And here are some of the css style classes that are at play
.post-entry-1 {
margin-bottom: 30px;
}
.post-entry-1 img {
margin-bottom: 30px;
}
.post-entry-1 h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
font-weight: 500;
}
.post-entry-1 h2 a {
color: var(--color-black);
}
.post-entry-1.lg h2 {
font-size: 40px;
line-height: 1;
}
.post-meta {
font-size: 11px;
letter-spacing: 0.07rem;
text-transform: uppercase;
font-weight: 600;
font-family: var(--font-secondary);
color: rgba(var(--color-black-rgb), 0.4);
margin-bottom: 10px;
}
What could be the issue?

Answer 1

I can see that your CSS class name of .post-entry-1 is the main wrapper that wraps all contents of your post, and you gave margin-bottom value of 30px.
Maybe you may try delete it? Or, please take a look at .mx-1.