castlecode supports this item


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

270 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

Is there a way to make the image flip over and show another image?

yes, that’s totally possible, you can add any HTML on each side of the card, so you can add an image in the front and another image in the back

Best :)


My partner and I are building a site and we would like to use your Flipping Cards plug in to display a grid of cards that are 3 cards x 3 cards at 300×300 px. I for the life of me just can’t get them to line up correctly. Can you help us out please?

Our site is:

Please let me know if you need admin access. Thank you. Jess and Bree

Hi Jess and Bree,
try adding this peace of CSS:

.fc_card-container .fc_card {
    top: 0;
    left: 0;
I hope that’s what you meant ;)

Hi, I´ve bought your plugin Flipping Cards. Thanks in advance, It´s great. I have a question: Can I track clicks on a flipping car? How can I do it ? Thanks!

Hi there,
I don’t quite understand, can you explain a little bit more?
Best, David

I need to count the number of clicks on the cards through Analytics. Is it possible?

Currently the plugin doesn’t have this feature :/

I dont know what to do.

It looks like this:

What do you mean with insert html of picture? Like URL? I tried many things but it just dont work.

Lastly I used this shortcode but it also didnt worked.:



<    img src="healty-man-7.png" /    >


<    img src="unhealthy-man-7.png" /    >



I see, try the following steps:

1) Add this peace of CSS to the css/flipCards.css file (at the top)

.fc_card-container .fc_card>div{
  top: 0 !important;

2) In the admin page of the flipping cards set padding to 0

Ok, I changed CSS and it looks better now. But it’s still not like it should. The image is very small no matter which height or width I enter in plugin settings. Also its on the right side but I choosed the left side. On mobile devices the image is out of the screen.

Ohh I see the issue, instead of this:
write this:
also if you want something responsive, you can use percentage width, for example:

Hi, i’m trying to style the back of some cards differently and saw you previously posted this comment: but when I try to add a class to one of the cards’ shortcodes, it doesn’t stick and appear on the website.

For example, when I try the below:

“[ fc_back back_class=”greenbackcard” class=”greenbackcard”] Test

Neither back_class or class adds the class attribute.

Has this changed?

It should be working, can you show me a living example online? so I can see what’s going on.

Also you can contact me privately via email through this form:

Best, David

I’m experiencing a small glitch with the card flip. When the user hovers on/off a card during page load, the card flips and stays on the backside. Hovering again flips it to the frontside.

I have cards filling front page of the website, so this happens frequently enough to create a problem with user experience.

Is there anyway to hide cards (or delay the effect) until after the page is fully loaded? I think that would eliminate the glitch.

by any chance you manually added the class “mouseenter” to the flipping card container?

Yes, it’s looks like a leftover class. I was working on another solution before Flipping Cards. Looks like removing it fixed the glitch. Thanks so much!

glad to hear that :D indeed, the plugin uses that class in order to detect if the plugin has been initialized ;)