How to get all cards in a text box to dynamically display on 3 by row

[CIDAdmin]

Hello,

Question 1: We have an events and media page where each event is assigned a custom designed card. Currently, we display 3 cards per row (a text box) as shown below. Unfortunately, that becomes a problem when we need to add a new card, because each card needs to be shifted by one, with some moving from one text box to the next. Is there a way to instead have one single text box with all the cards, and use CSS to dynamically force this 3 columns display on large screens and 1 column display on mobile?

Question 2: Is it possible to extend the height of the cards to be the same? Ideally this should happen to cards that belong to the same row, otherwise even simply adjust all to the largest height without the need to hard-code this value in advance.

The page for reference: https://climatedata.imf.org/pages/events-and-media 

Thank you

Alessandra

[KlaraSchmitt]

Hello @CIDAdmin,

Regarding question #1, given you are already using our card code snippet, I will assume that you are at least moderately comfortable in the HTML editor of the Text Card. It is possible to move all three cards into the same Text Card to avoid the scenario you are describing, but you will need to add some of the grid classes to handle reflow in the layout. You will need to add a wrapper div around each .calcite-web card that represents the sizes you want the card to take based on device size.

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="calcite-web">
...
</div>
</div>

Hub is based on a 12-column grid in Bootstrap 3, so the number of columns in a row need to equal 12, but a row's width changes (this is called a breakpoint) based on the device that is rendering your site. My example above roughly translates to "On mobile devices, this card should be 12 columns wide (100% of the available width). On tablets in portrait orientation, this card should be 6 columns wide (50% of the width). On tablets in landscape orientation AND anything larger, this card should be 4 columns wide (~30% of the width)."

You may find the examples on the Bootstrap documentation helpful: https://getbootstrap.com/docs/3.4/css/#grid-example-mixed 

In regards to Question #2, this is actually much more challenging to do with the Bootstrap grid if you want it handled dynamically. It is possible using CSS flexbox, but you would need to setup your own grid structure (and ignore everything I just wrote about Bootstrap's columns.) The reason we don't set height in that code snippet is because as soon as the card starts to resize to handle different devices, it often increases in height and a fixed height would cut off part of the card's contents. You could use custom css to set a min-height on the .calcite-web class, but I would definitely recommend adding a unique class to the row first, just so you don't impact anything else.

.custom-row-class .calcite-web {
min-height: 468px;  /*or the height of your tallest card in the row */
}