I've got a creative website. On the blog we show what can be made with our products.
At the end of my blog post I want to list all used products in a list, all in cards like on the rest of our website but only a small image with the title. I don't mind adding HTML-code.
What I have now is the cards but below each other instead of besides each other and the image is enlarged to 295px instead of 65px.
Not sure if I can paste HTML here, but this is what I have:
<div class="product-grid">
<div class="item-grid">
<div class="item-box">
<div class="card product-item" data-productid="98">
<div class="card-image picture waves-effect" style="display:block"><a href="/NL/cijfers-stencil" title="Numbers"> <img alt="Numbers" src="/images/thumbs/0000137_cijfers-stencil_64.jpeg" title="Numbers"> </a></div>
<div class="card-content details">
<h2 class="product-title"><a href="/NL/cijfers-stencil">Cijfers - stencil</a></h2>
</div>
</div>
</div>
</div>
</div>
<div class="item-grid">
<div class="item-box">
<div class="card product-item" data-productid="98">
<div class="card-image picture waves-effect" style="display:block"><a href="/NL/watercolor-mixed-media-papier-wit-200-grams" title="Watercolor / Mixed Media papier, wit 200 grams"> <img alt="Numbers" src="/images/thumbs/0000813_watercolor-mixed-media-papier-wit-200-grams_64.jpeg" title="Watercolor / Mixed Media papier, wit 200 grams"> </a></div>
<div class="card-content details">
<h2 class="product-title"><a href="/NL/watercolor-mixed-media-papier-wit-200-grams">Watercolor / Mixed Media papier, wit 200 grams</a></h2>
</div>
</div>
</div>
</div>
</div>
</div>
A working example is available at http://zelfvervaardigd.nl/NL/blog/month/2020-4
As you can see at the bottom the products. My first attempts does use the small images but not on cards and it just looks terrible. The second attempt is the posted code. It is on cards but too large and not besides each other.
How to get the cards besides each other like it is on this page: http://zelfvervaardigd.nl/NL/nieuw
Thanks.