Fixed 3D Flipping Card Component animation stutter and Closes #948 #949
+166
−57
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Description: This PR fixes several mobile layout bugs and improves site usability. Changes Made: Responsive Header: Added display: flex to the desktop header to correctly align the logo and nav links. Implemented a CSS-only "hamburger menu" for mobile (using the "checkbox hack"). The menu is now functional and animates open and closed. Centered Gallery: Added align-items: center to the .card-grid media query. This now centers the cards properly when they stack on mobile. Accessibility Fix: Corrected the low-contrast text. The default body text is now dark, and color: #fff is only used on sections with dark backgrounds (like the header and footer).
Introduced a new .card-wrapper div to encapsulate the card container, improving the structure and separation of the 3D flipping card component. Updated CSS to reflect the new hierarchy and adjusted hover effect to target the container within the wrapper.
KrishLalakiya
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Added Parent div and assign hover to it so if you are initially hovering the card then animation will continue, only go back when you leave that parent div. So no more stutter in animation.
Before Fix
Screen.Recording.2025-10-29.025046.mp4
After Fix
Screen.Recording.2025-10-29.030331.mp4