CODEWITHSUNDEEP
javascripthtmlcss
scalartensor
scalartensor

Reputation: 145

how to sort html javascripts post cards side by side?

i have a html post card code like this, how to sort cards to the side? side by side i mean..

this is full code:

<main class="main-area">

        <div class="centered">

            <section class="cards">
              {% for post in paginator.posts %}

                <article class="card">
                    <a href="{{ post.url | prepend: site.baseurl }}">
                        <div class="card-content">
                            <h2>{{ post.title }}</h2>
                        </div><!-- .card-content -->
                        <picture class="thumbnail">
                            <img src="https://d4mucfpksywv.cloudfront.net/research-covers/science-of-ai/gradient.jpg" alt="A banana that looks like a bird">
                        </picture>
                    </a>
                </article><!-- .card -->
            </section><!-- .cards -->
           {% endfor %}
        </div><!-- .centered -->

    </main>

Upvotes: 0

Views: 127

Answers (1)

Decoolipascal
Decoolipascal

Reputation: 82

I can't really see your css but the default css for an article tag is "block". This is the reason why the postcards are aligned vertically. 

.card{ 
  display: inline
}

This line would fix it. But since that probably would cause some ugly design I would recommend using flex. 

.cards{
  display: flex;
  flex-flow: row wrap;
}

There are even more options to design your "flex" flow like "justify-content/align-items". Also I think mohameddrira is right and your {% endfor %} is at the wrong point in your code causing some trouble.

Upvotes: 1

Related Questions