Card Deck Flow faults in Chrome

Foundry
1

Hi, I am using the CardDeck in Flow mode here:
https://reckhenrich.com/de/beratung/

With Safari the three columns are placed next to each other. On Chrome, the last column is placed beneath the first two. Any clue?

2

Hey there @Fuellemann – That is odd. Might be a browser rounding problem. Can you do me a favor and ZIP up your project file and send it along? Also, let me know what version of Chrome you’re using.

Also, can you visit the Documentation page for the Card Deck stack and let me know if the problem occurs there in Chrome as well?

3

Got your file. I’ll give it a look first thing tomorrow. :+1:

4

So I had a few minutes to load up the page and look it over while I was waiting on the oven to heat up…

It looks like you’re using the stack in Flow mode, which is like a masonry style setup. I see why you’re going it, in an attempt to make each item a different length. Flow mode though builds its layout from top to bottom and then left to right, as per the way that Bootstrap is designed to do so.This is why your second column is below the first.

While the other browsers are interpreting it more like you want it to, Chrome looks to be doing what the Bootstrap developer wanted. I probably would have assumed it would work the way you expected, but I see why it is not. If you add a couple more cards to that layout within your Card Deck, you’ll see what I mean.

That said, the layout you want would be the Deck layout and not the Flow layout in this case.

1 Like