Creating a grid with multiple card elements

[paulvdgeijn]

Hi, I’d like to make a grid of album covers with 4 columns (maybe more) and x amount of rows using the card element.
Right now I have 4 columns each containing the ‘card’ element, but I’m not able to get all image covers the same size. Also, I think there might be a better way to do this since there is no way to add more columns this way.
What is the best way to create a grid of images with the card element?

Here’s the website I’m working on (click ‘credits’ in the nav bar): www.ivorymusic.nl

Thanks!

[kory]

Howdy, @paulvdgeijn! Thanks for writing in…I took a look at your design but can’t quite see where you’re introducing those images into your design. I can tell it appears to be some custom styling, but I couldn’t locate it in parsing through the markup quickly.

That being said, it may be that you are not having the cards all line up due to a similar issue I answered recently for another user. Take a look through my response on this thread to see if it helps to point you in the right direction (a similar approach can be taken with Grids / Cells):

Card Element Size Issue

Howdy, @tkcostello! Thanks for writing in and great question. You can absolutely get your cards to line up, but it requires a bit of setup throughout your Rows / Columns to get things functioning properly. Each individual Card itself will always ensure that its height will be set by the tallest face between the two sides of the Card, but that is the extent to which it can perform this action because it cannot know anything beyond itself in terms of a styling context. Therefore, to get multiple c…

Cheers!

[thusgaard]

@paulvdgeijn, @tkcostello : Is there a way to have this kind of cards appear based on selection in a menu. I’m interested in making something similar to this: https://autoklose.com/sales-tools-directory/

[paulvdgeijn]

Hi @kory, thanks for the reply! It helped somewhat, but not perfectly. Using your method I was able to get the cards the same size, but the album cover images aren’t shown completely. Parts of the borders are cut off.

I was able to fix this going to the Front Background Lower Layer. This is were I used the <img/ > element to upload the album covers. When I use cover or fill under Object Fit & Position the images aren’t fully shown and on smaller devices it gets even worse. Changing this to contain fixed that, but now the image is smaller compared to the back content of the card. The image is a square, but the column is a rectangle. Also, now I’m not able to use the Border Radius function since the image corners are not on the corners of the column anymore.
Is there a way to fix this? In principle all album covers are perfect square images so all I need is 4 square shaped cards that show the full image on front and the artist + title on the back. They should all get equally smaller when viewing them on smaller devices.

I have a two more question related to sizing, hope you can help me with those:

1. Below the album cover images I have 3 Accordion elements. On XS and SM devices the width of the column gets so small, the text inside the accordion is not readable anymore. The same happens to the Spotify player, it’s way too narrow to be usable. Is there a way to change the width of these columns on smaller devices so they are usable again?

2. On the top of the page there are 4 rectangular images with Headline text inside it (recording, mixing, production, studio). On XS and SM devices these images are way too big so I’d like to resize them to 4 square images instead. 2 on each row so you have a compact larger square. Is this possible?

Thanks!

[ruenel]

Hello @paulvdgeijn,

The cards are not of the same dimensions because they have different title length and height. To get this resolved, click each card element, find the “Customize” tab in the card element settings and insert this:

$el {
   min-height: 250px;
}

This will set a minimum height for each and they should be at least almost square enough since the width is roughly 250 pixels as well.

Hope this makes sense.

[paulvdgeijn]

Hi @ruenel, thanks for the reply! Unfortunately this doesn’t address the problem I have. When resizing the webbrowser or using a smaller device the front of the card remains a square, which is good, but the back of the card becomes a vertical rectangle. Even without text and button on the back of the card it will get taller than the front. Here’s a picture of what I mean:

I tried using max-height, but that also didn’t work. Am I missing something?

Thanks!

[ruenel]

Hello @paulvdgeijn,

If that is the case, your only option is to set the image as cover and position it to the top. It may cut off the album image but it will surely cover the entire card even on smaller screens.

Hope this makes sense.