Fix: Collapsing Team Cards in Prod

[JessieWooten]

Fixes collapsing team member cards in production.

CSS Specificity Issue

The root cause of the problem was css specificity on div.card.card-front. When ran locally, the .card class takes precedent applying position: relative to the element. Once the project runs in prod, however, .card-front wins. .card-front applies position: absolute causing the element to be removed from the document flow and its height/width to no longer be reflected in the parent. The result is the parent .flip-card-inner element's height and width collapsing down to the remaining text nodes.

Running Locally

Running on Firebase

[acumberlander]

Nice! So what you did to figure this out was just comparing the classes in the live version with the local version.. You know.. I don't know why I didn't think to do that.. 🤦🏾‍♂️ Good job catching this though!

[JessieWooten]

Nice! So what you did to figure this out was just comparing the classes in the live version with the local version.. You know.. I don't know why I didn't think to do that.. 🤦🏾‍♂️ Good job catching this though!

Yep. The give away was when I saw absolute positioning used in the .scss file. From there I realized the column containers were still respecting text content height and I knew what was happening. Absolute position is notorious for doing exactly this haha