Customize the horizontal cards number in a query loop

How To
1

Hello,

Is there any option for customize the number of cards in horizontal mode in the repeater?. I only see the max number for the page, but I would like to put only 4 per row for example, and put the same height for all

1 Like
2

Hi Paulo,
can you show me a quick example of what you mean?

Best regards,
timmse

3

Hi Tim,

image
image1894×460 264 KB

I would like to limit the loop to 3 or 4 cards and is there the possibility to preserve same height or should I do it manually with code?

Thank you!

4

Hi Paulo,
to achieve this you need to consider a few things:

  1. the images: Assuming your images are all the same size: great, you don’t have to worry about anything. However, if they are different, for example some in landscape, others in portrait, you will have a problem. You can solve this either with a container that has 100% width, a fixed height like 300px and the image as background image (cover). Alternatively with the img element and object-fit (but there is a bug in 1.4 beta and 1.3.7). So all images are the same size.

  2. the length of the post title: you can trim the length of the post title to words {post_title:3}, but this can still be problematic, because some words are longer than others. Accordingly, you need to trim the width and height of your post title as well. You can do this by giving the title a max-width in ch, for example 10ch (depending on how many characters fit in your column). Then you have to limit the height, set the overflow to hidden and if necessary put a ::after “…” behind it. Alternatively you can set a minimum height for the post title wrapper, if you know how big the longest headline is and how many rows will be created (depending on the number of columns).

  3. to create columns of the same size that wrap automatically: set your outer container to flex-wrap: wrap and direction: row (on desktop). Then create a class on your card with the following values.
    Example 4 columns: flex-basis: 25%. This ensures that all columns are 25% wide. If you use a colum gap (e.g. 2.4rem), you have to include it in flex-basis: calc(25% - 1.8rem). With 3 columns it would be 33.333%, including 2.4rem gap: calc(33.333% - 1.6rem).

Best regards,
timmse

4 Likes
5

Hi sorry if I’m hijacking the thread but it’s relatxed @timmse

I’ve been rebuilding my website to learn bricks and I’m having trouble making my horizontal slider drofaggable on desktop.

I’ve seen guides with js in them but not really sure on the how / where to put it all.

Here’s my link
https://culpritdesign.co.uk/mystaging01/

6

Hi Daniel,
what is the problem and what exactly do you want to do?

There is currently no slider on your page :thinking:

7

Sorry @timmse - think i used wrong terminology here

I’m looking to make my portfolio carousel draggable on desktop

8

Hi Daniel,
Have you looked at the carousel element?

If I understand you correctly, this is exactly what you are looking for.

Best regards,
timmse