I am building a responsive and fluid website based on grids and flex boxes.
Images and texts scale with fluidity base on the available screen real estate.
I included some flipping cards but I am stuck with some problems.
I have started adapting the beautiful flipping card solution developed By Tyrell Rummage.
However, I am stuck and would love some help.
I noticed that the parallax effect is no longer working in Safari but works fine both in Chrome and Firefox (it works in the original development). Also, the flipping cards should have a fixed size ratio of 4/3. The min width should be 280px (when viewed on a 320px mobile screen) so the min height should be 210px. There should also be a set max width and height and would prefer having no more than 2 cards displayed on a row at any given time.
I guess I could set the overflow set to scroll on the cards to avoid having too small characters when viewed on a mobile device.
Anyway, any and all suggestions are welcome, here is a link to my pen:
See the Pen
Fluid Parallax Flipping cards with fixed size ratio by Gabor Farkas (@gaborf)
on CodePen.
