12 days of holiday fun calendar utilizing html/CSS/JS flipcard

hey everyone! I used a free 3d pack of holiday images to create this lil 12 days of holiday fun feature. I am learning JS and CSS and wanted to test out a flipcard function and inspire others to make the most of the remaining time this holiday season.

live code
github link to the project

QUESTION: i wrote 2 breakpoints and they are functioning in size however i am having an issue with mobile. The grid layout is correct but my text is showing through the card even though i have backface-vis set to hidden. any ideas on how to fix?


i answered my own question and updated code on github but the fix for iOS safari was simply adding:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
to both the front and back of the card in CSS and now it works.

i ended up using my IP address and port to refresh on my phone but would love to hear about how others mobile test since this would only apply if i was on the same network. much thanks!

1 Like