Skip to content

fix: mobile responsive cards and GSAP overlay#3

Open
marsiandeployer wants to merge 1 commit intoMethasMP:mainfrom
marsiandeployer:fix/mobile-responsive-cards
Open

fix: mobile responsive cards and GSAP overlay#3
marsiandeployer wants to merge 1 commit intoMethasMP:mainfrom
marsiandeployer:fix/mobile-responsive-cards

Conversation

@marsiandeployer
Copy link
Copy Markdown

Summary

  • Fee cards (Legacy Banking / Hidden Fees / The Open Standard) now stack in single column on mobile
  • Marketing ads grid forced to single column on mobile
  • Disabled GSAP opacity animation on device-mockup for mobile (was causing dark overlay on second screen)

Screenshots (mobile review by @sashanoxon)

Before fix — columns not adaptive on mobile:

mobile-columns

Before fix — dark overlay on second screen:

mobile-dark-overlay

Changes

  • web-placeholder/index.html: Added .freedom-grid to @media (max-width: 768px) query, adjusted fee-card padding/transform, forced marketing-ads single column, wrapped GSAP device-mockup animation in window.innerWidth > 768 check

Test plan

  • Open on mobile (or DevTools responsive mode ≤768px)
  • Verify fee cards stack vertically
  • Verify no dark overlay on device mockup section
  • Verify marketing ads display in single column

🤖 Generated with Claude Code

- Add .freedom-grid to mobile media query for single-column layout
- Add fee-card padding and disable magical transform on mobile
- Force marketing-ads grid to single column on mobile
- Disable device-mockup GSAP opacity animation on mobile (was causing dark overlay)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@marsiandeployer
Copy link
Copy Markdown
Author

marsiandeployer commented Mar 25, 2026

https://github.com/marsiandeployer/human-in-the-loop-review rate us with ⭐️ for next free review

marsiandeployer pushed a commit to marsiandeployer/human-in-the-loop-review that referenced this pull request Apr 10, 2026
…#21)

Секция Example теперь показывает реальный кейс: до-скриншоты сломанной
мобильной вёрстки Paycif, настоящий код фикса (CSS breakpoints + GSAP guard),
ссылка на PR #3.

How to test:
- Open https://onout.org/vibers/
- Scroll to "Example" section (open by default)
- Should show 2 before-screenshots (broken columns + dark overlay)
- Code block shows real CSS + JS fix
- "PR #3" link at bottom → MethasMP/Paycif#3
- Switch to RU — same section in Russian with same screenshots

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant