Is there a way to move my icon to the next row once it is added?

Can anyone suggest a style, bootstrap, or code solution for my issue? Currently, when I add an item, it is placed at the end of the row, but I want them to shift to the next row. Below are two images showing my current implementation: pic1

pic2

<div class="layoutpost" >
    {% for post in  posts %}
    <div class="post">
        <div class="img-post">
          <img src="{{post.urls}}" alt="">
        </div>
        <div class="postdescribe">
            <div>{{post.title}}</div>
            <div class="price">price: {{post.price}}</div>
            <div class="more">
            <a href="{% url 'post' post.id %}"> more... </a>
            </div>
        </div>
    </div>
</div>


.layoutpost{
display: flex;
justify-content: space-around;

}
.post{
width: 20%;
border: 0.5px solid;
}
.postdescribe{
margin-left: 10px;
margin-bottom: 10px;
}
.img-post{
width: 100%;
height: 300px;
}
.img-post img {
height: 90%;
width: 100%;
}

Answer №1

If you're looking to achieve the desired result, simply insert the following code snippet. Rather than utilizing space-between, opt for space-evenly for a more aesthetically pleasing layout.

.layoutpost{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CORS issue encountered by specific user visiting the hosted website

I recently developed a bot chatting website using Django and React, which I have hosted on HOSTINGER. The backend is being hosted using VPS. However, some users are able to see the full website while others encounter CORS errors where the APIs are not func ...

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

Ways to choose an identifier larger than

Currently, I am in the process of creating a news system for a website. For this project, I referred to a tutorial on building a news system which can be found here: To showcase the news articles, I have implemented the following code snippet: if(!$_GET[ ...

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

interactive symbols in a reorganizable tree structure

I have been developing a customizable tree list for our users to arrange their website content. It allows them to add and rearrange pages by dragging and dropping. Each list item includes the page name and three icons (lock, visible, and edit). The challe ...

Remove all of the classes from the specified element using JavaScript

I have a button and I want to remove all the classes when it is clicked. Here is what I have tried: button.style.className = '' document.querySelector('button').onclick = function() { this.style.className = ''; } .myClas ...

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

Having trouble converting the signup form to PDO from MySQLI, encountering a DATABASE error

I have implemented a login system and attempted to switch from Mysqli to PDO. Currently, my website is connected to a database using phpMyAdmin/MySQL. I have successfully converted the login part of the system to use PDO. Now, I will demonstrate the Sign ...

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

The navigation bar and column layout is not functioning properly in Firefox

Hey there! I'm having a little issue with my website. When I view it in Chrome, everything looks perfect - the logo is left aligned at the top right and the testimonials section at the bottom has a nice 3 column layout. But when I try to open it in Fi ...

Having trouble centering the links in the Bootstrap navbar?

I've been struggling to center the links/tabs on my Bootstrap navbar for days now and I just can't seem to get it right. I've gone through countless similar questions without any luck. Something must be off in my code or maybe I'm not t ...

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

Encoding data using Angular

I have encountered a situation where my code needs to retrieve table numbers using Javascript and PHP as the database connector. However, when the code works successfully, it displays both the parameter name and value, but I only need the value. How can I ...

The issue of the background image not expanding to cover the entire page when resized is problematic

Hello there, I'm currently working on making my website responsive and I've run into a problem with GIF images. No matter what I do, they just won't fill the entire page. When I try to make them smaller, it leaves white spaces at the top and ...

Issues with React JS and JavaScript filtering functionality not working correctly

I've been working on implementing a filter feature for a website, using an HTML range slider. However, I've encountered an issue where the values only update correctly when decreasing. For example, if I set the slider to $500, only products that ...

Decrease the height of h1 by using the display property set to table-cell

I managed to center text inside a table cell using display: table-cell, vertical-align: middle, and text-align: center. However, I'm experiencing unwanted spacing above and below the text. How can I completely eliminate it? I want zero margin/padding ...

Utilizing Kendo MVVM to Bind to an Self-Executing Anonymous Module Function

Currently, I am experimenting with the Kendo UI MVVM framework and attempting to bind it to a self-executing anonymous modular function. The situation is a bit complex, as the functionality is only somewhat working. Although the module is being updated whe ...