My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip.
See the issue in action here:
https://jsfiddle.net/qk1pkkcd/2/
Here is the code for the project boxes:
<div class="card-container">
<div class="card-top learn">
<img class="card-top.create card-top" src="<%= Citybuilder.ProjectPic.url({@post.project_pic, @post}) %>" />
<span class="project-type"><%= @post.project_location %></span>
<div class="blur"></div>
</div>
<div class="content">
<div class="details">
<span> </span>
<span>...</span>
</div>
<div class="project-card-title">
<%= @post.title %>
</div>
<div class="project-card-summary">
<%= truncate @post.body, length: 80, separator: " " %>
</div>
<h3 class="house-divider-unicode">~</h3>
<div style="text-align: center">
<div class="project-card-done-so-far-one">1.
<%= @post.done_so_far_one_title %>
</div>
<div class="project-card-done-so-far-one">2.
<%= @post.done_so_far_two_title %>
</div>
<div class="project-card-done-so-far-one">3.
<%= @post.done_so_far_three_title %>
</div>
</div>
To render the posts correctly, use this snippet:
<div class="center-wrap">
<table id="posts" class="table posts flex-table-posts">
<tbody>
<%= for post <- @posts do %>
<%= render "_post_variants.html", conn: @conn, post: post, upvote: @upvotes[post.id], forks_count: @forks_count %>
<% end %>
</tbody>
</table>
</div>
I tried setting the width of the card container to 1/3:
.card-container {
font-family: "Open Sans", sans-serif;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
display: inline-block;
min-width: 24.92em;
height: auto;
margin-right: 2em;
margin-bottom: 2em;
border-radius: 0.5em;
background-color: #fff;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 3em;
width: calc(100% * (1/3));
flex-grow: 1;
}
.flex-parent-container {
display: flex;
flex-wrap:wrap;
}
However, the boxes continue to stack horizontally instead of appearing in rows of three as expected.