castlecode supports this item


This author's response time can be up to 1 business day.

264 comments found.

I am trying to use the ratio parameter and it is giving me odd heights which is causing undesirable behavior with my tiles. Every other row only has one tile compared to the odd rows which have three (as intended). Here is the page that I am having trouble with:

I am also having problems with the responsiveness scaling too small. I set a min-width on the div’s within the [flippingCard] shortcode, but it is ignoring that minimum. Can I apply minimums directly to the [flippingCard] shortcode?

Any help is greatly appreciated.

Try adding this line of CSS:

    overflow-y: scroll !important; 
Best ;)

I’m not sure what that would have to do with the height of the first tile, but I added it and no change. The first tile at 1280×800 still is sized at 390.719px whereas the other two tiles in the row are sized at 385.109px. You can see a screen capture of what it looks like here:

Again, this is if you resize your browser to 1280×800 (I use Chrome plugin Window Resizer) and then refresh the browser it renders the heights incorrectly.


the issue is that when the page first loads there’s no scroll-bar so the width is different for the first card, but later on we add height to the flipping card (with JS because of the ratio) so the scroll-bar shows up, so now the 33% with scroll-bar is different than 33% without scroll-bar

it is kind of confusing, but with that line of CSS the scroll-bar is present from the beginning.
I tested out with the resolution you mentioned, and I see it exactly as the screen shot you sent, but after adding that peace of CSS above then the first card has the exact same height as the others

did you add that line of CSS in this page? since I don’t see it in the source code, you can add it at the top of the the css/flipCard.css file

Best, David


In some screen views, the FlipCards overlap the static navigation bar. Here’s the web page:


Jon Cullen

Hi Jon,
Try adding this peace of CSS:

div.fc_card-container {
    z-index: 99 !important;
you can add it at the beginning of the css/flipCard.css file

Best, David

natjak Purchased


I purchased your Flipping Cards 3D Wordpress package, but it isn’t working right on Safari 11. Cards are showing their front only when they are hovered, but front sides should be visible immediately when page is loaded.

I ended up with the free code exactly to same point and I really believed this package what cost should work. My flipping card problem is showed here:

First row is free code and your plugin is on second row. I hope you send me some code to add make it work as soon as possible.

I noticed that there’s some odd shadow under the card, how can I remove it?

Best regards,

Katja Nevalainen


natjak Purchased

Thank you for your answer!

Code to remove shadow worked nicely.

I added a screenshot of an empty page (how Safari 11 loads page, both in my home and at work) to

I really hope you can find some solution to this problem.

Best, Katja


natjak Purchased

Hi again!

It works right after I cleared all recent history, thanks a lot for your help!


awesome :D

Dear sir,

I want to buy this code but when I view the demo through chrome there is no flip effect it just a fade-in for the elements, also could I make it image flip to another image through the admin panel

Thanks for your time and your reply is much appreciated

Sorry for the delay, I was on vacations ;)

very strange, I see it working on my end (on Google Chrome v63.0.3239.84), is it working on Firefox?

and yes, you can have one image in the front and another one in the back, you can add any HTML in the shortcode (in the back or in the front side), for example like this:

     <img src="myimg.png" />
    <img src="myimg.png" />

Best, David