Inside the post div, there will be multiple post rows. Each row contains maximum 4 posts. So when there are 5 posts there comes the problem with responsiveness. First 4 posts (first row) will respond to the screen size but the 5th post (second row) does nothing because there are space left for the 5th post.
<div class="posts">
{% if post %}
{% for media in post %}
{% if forloop.counter0|divisibleby:"4" %}
<div class="post-row">
{% endif %}
<a id="post-wrapper" href="{% url 'sh-media' %}?pid={{media.pid}}">
<div class="thumbnail-container">
<img src="{{ media.media_thumbnail.url }}" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">{{ media.caption}}</h2>
<p class="video-description">{{ media.descr }}</p>
</div>
</div>
</a>
{% if forloop.counter0|add:"1"|divisibleby:"4" or forloop.last %}
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
<style>
.posts{
display: flex;
flex-direction: column;
color: #fff;
padding-top: 15px;
justify-content: flex-start;
}
.post-row{
display: flex:
}
#post-wrapper{
margin: 20px 10px;
}
</style>
Is there any way to make all the posts will maintain the same size when it respond to the screen size?
Output HTML:
<div class="posts">
<div class="post-row">
<a id="post-wrapper" href="/watch-profile%23ed-media?pid=060">
<div class="thumbnail-container">
<img src="/static/images/9_16%20Video.png" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">sea breeze</h2>
<p class="video-description">Winter morning sweet music</p>
</div>
</div>
</a>
<a id="post-wrapper" href="/watch-profile%23ed-media?pid=bea">
<div class="thumbnail-container">
<img src="/static/images/9_16%20Audio.png" class="post-thumbnail" >
<div class="gradient-overlay">
<h2 class="video-caption">Winter</h2>
<p class="video-description">Winter morning sweet music</p>
</div>
</div>
</a>
<a id="post-wrapper" href="/watch-profile%23ed-media?pid=ba8">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/DSC_0354.JPEG" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">Thousand years</h2>
<p class="video-description">A Thousand Years, a romantic song about the fear of falling in love, is a sleeper hit.</p>
</div>
</div>
</a>
<a id="post-wrapper" href="/watch-profile%23ed-media?pid=731">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/martin-blaszkiewicz-fv8YJZ471kQ-unsplash.jpg" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">Aurora Runaway</h2>
<p class="video-description">a song by Norwegian singer-songwriter Aurora</p>
</div>
</div>
</a>
</div>
<div class="post-row">
<a id="post-wrapper" href="/watch-profile%23ed-media?pid=46e">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/_c5eea445-cb7b-4aaa-8a8c-74a43e3c6561-transformed.jpeg" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">KungFu Panda</h2>
<p class="video-description">4k video of kungfu panda</p>
</div>
</div>
</a>
</div>
</div>
You have a typo in .post-row {display: flex:} so we correct that. Then set the flex value of the links to flex: 0 0 25% so they are each 1/4 of the width
* {
margin: 0;
padding: 0;
min-width: 0;
min-height: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.posts {
display: flex;
flex-direction: column;
color: #fff;
padding-top: 15px;
justify-content: flex-start;
}
.post-row {
display: flex;
margin-bottom: 10px;
}
.post-wrapper {
flex: 0 0 25%;
border: 1px solid red;
background: lightblue;
}
.post-wrapper:not(:last-child) {
margin-right: 10px;
}<div class="posts">
<div class="post-row">
<a class="post-wrapper" href="/watch-profile%23ed-media?pid=060">
<div class="thumbnail-container">
<img src="/static/images/9_16%20Video.png" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">sea breeze</h2>
<p class="video-description">Winter morning sweet music</p>
</div>
</div>
</a>
<a class="post-wrapper" href="/watch-profile%23ed-media?pid=bea">
<div class="thumbnail-container">
<img src="/static/images/9_16%20Audio.png" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">Winter</h2>
<p class="video-description">Winter morning sweet music</p>
</div>
</div>
</a>
<a class="post-wrapper" href="/watch-profile%23ed-media?pid=ba8">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/DSC_0354.JPEG" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">Thousand years</h2>
<p class="video-description">A Thousand Years, a romantic song about the fear of falling in love, is a sleeper hit.</p>
</div>
</div>
</a>
<a class="post-wrapper" href="/watch-profile%23ed-media?pid=731">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/martin-blaszkiewicz-fv8YJZ471kQ-unsplash.jpg" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">Aurora Runaway</h2>
<p class="video-description">a song by Norwegian singer-songwriter Aurora</p>
</div>
</div>
</a>
</div>
<div class="post-row">
<a class="post-wrapper" href="/watch-profile%23ed-media?pid=46e">
<div class="thumbnail-container">
<img src="/media/media/Thumbnails/_c5eea445-cb7b-4aaa-8a8c-74a43e3c6561-transformed.jpeg" class="post-thumbnail">
<div class="gradient-overlay">
<h2 class="video-caption">KungFu Panda</h2>
<p class="video-description">4k video of kungfu panda</p>
</div>
</div>
</a>
</div>
</div>