CODEWITHSUNDEEP
htmlcssruby-on-railshorizontallistview
York Wang
York Wang

Reputation: 1977

Align divs horizontally with rails generated loop

I'm trying to lay out a list of blog posts horizontally. But I don't know how. I was able to achieve the result i wanted using css flexbox when creating the static mockup, but as soon as I replace the placeholder tags with rails loop, the layout breaks and all posts line up vertically. Also, Below the end of the last post, theres this string of texts with all the posts information floating at the bottom(see attached photo), not sure what i did wrong here. strings at the bottom of the post

Below are my html and css setup:

  <section id="posts" class="wrapper">
    <h2>My Latest Articles</h2>
    <hr>

    <div class="post_container">
      <div class="article">
        <%= @posts.each do |p| %>
        <h3 class="post_title"><%= link_to p.title, p %></h3>
        <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
        <p class="content"><%= truncate(p.content, length: 400)  %></p>
        <% end %>
      </div>
    </div>

CSS

#posts {
    padding: 6.5em 0 10em 0;
    h2 {
        text-align: center;
        color: $text;
        margin-bottom: 1.25rem;
    }

    .post_container {
        padding: 6em 0 6em 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .article {
            max-width: 28%;
        }
        .post_title {
            color: $text;
      font-size: 1.6em;
        }
        .post_date {
            padding: .75rem 0;
            color: $accent;
            font-size: 1.2em;
        }
        .content {
            color: $grey;
        }
    }
}

Upvotes: 0

Views: 1003

Answers (2)

Luka Kerr
Luka Kerr

Reputation: 4239

To remove the string of information below the posts, you need to modify your erb code.

Change the post_container div to this:

<div class="post_container">
  <div class="article">
    <% @posts.each do |p| %>
      <h3 class="post_title"><%= link_to p.title, p %></h3>
      <p class="post_date"><%= p.created_at.strftime("%A,%b %d") %></p>
      <p class="content"><%= truncate(p.content, length: 400)  %></p>
    <% end %>
  </div>
</div>

Upvotes: 2

Christian Dominic Yap
Christian Dominic Yap

Reputation: 21

Try surrounding everything inside the loop with a div. Hope this helps!

Upvotes: 2

Related Questions