Content cards for articles

Kirby 3 Solved ✅
1

Hi. I am trying to make cards for my articles. If I apply some css code to it, the background-color code is not applyed only to one article but to whole block.

So I want to achieve this →

But this happens when I try to add some styling →

1354×573

<main class="articolelepulii" role="main">


  <?php foreach($page->children()->listed()->flip()->paginate(9) as $article): ?>

  <article>
     <div class="cards">
<h2><?= $article->title()->html() ?></h2>
<p><?= $article->text()->excerpt(300) ?></p>
<?= $article->intro()->kirbytext() ?>
<a href="<?= $article->url() ?>">Read more…</a>
   </div>
  </article>

  <?php endforeach ?>

</main>
2

The you are applying your styles in the wrong place, but how are we supposed to know how you are doing it?

3

What do You mean by wrong place? I thought If i will set a width, color i will have a gap between articles and their styling that i defined in my css

4

Could you please post your styles? From what you posted above and your screenshot I cannot tell what exactly you did.

5

You were right, IT was a problem from my styles :D, solved it with grid-gap, thanks !!