Positioning a set of cards

Authoring Twine
1

I’m using Harlowe 2.1 and I’m trying to have a set of 10 cards where each would lead to another passage when clicked. I’m using Flexbox to position them, and it looks great, however it has 4 cards per row so I end up with a row of 2 extra cards. Since there is 10 cards I want 5 cards per row but no matter what I do nothing works. Here’s the HTML:

<div class="container">\
<div class="cards">\
<div class="card">\
Card content #1
</div>\
<div class="card">\
|no-hover>[\
card content #2
</div>\
<div class="card">\
Card content #3             
</div>\
<div class="card">\
Card content #4
</div>\
<div class="card">\
Card content #5          
</div>\
/* and ditto for the last 5 cards... */
</div>
</div>

And the CSS:

.container{
 width: 100%;
 height: 100%;
}

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   position: relative;
}

.card {
  margin: 4px;
  flex: 0 1 18%;
}
2

The CSS you supplied should display a 5 column by 2 row grid, until the font-size you are using (to display the cell text) results in there not being enough width to display 5 columns worth.

eg. the largest word in your example card elements is “content” so that and the current font-size is controlling the minimum width of the columns, so when there isn’t enough overall width to display 5 copies of “content” across the page then the grid will become 4 columns wide. etc…

You could use @media CSS rules to reduce the font-size based on the current width of the view-port.

3

I used @media to set font-size to 0 and the cards still won’t budge.

@media (min-width: 1025px){
  
  .card .cards{font-size: 0px;}
  
}

The “content” part was just placeholder text I used for this specific post so the code doesn’t end up being long. Here’s what I have for each card <div>:

|no-hover>[\
[<img id="tart" src="card.png" title="Pick a Card">]<link#|]

Each card has a different link number, and after all the cards’ <div> tags I would use (click: ?link#)

4

Update: I went back and messed around with it, and I figured it out!

I just had to set the passage’s margin to 0

tw-story[tags="path"] {
margin: 0;
}