Repository navigation
[UI]: Improper heading and logo alignment on mobile view #101
Description
Current Behavior
On mobile viewports (tested at ~412px width, Galaxy A51/71), the hero section's two-column desktop layout (badge icon + text) on this page does not collapse into a proper single-column, centered layout. The badge icon sits in a narrow left column while the subtitle ("Showcasing Your Achievements as a User and a Contributor") and the large heading ("Layer5 Recognition Program") remain left-indented in the right column, starting at the same x-offset as the icon's column. Since the icon is much shorter than the text block, the heading ends up floating left with a large empty gap beside it, breaking visual alignment with the centered paragraph and image directly below it.
https://badges.layer5.io/
Expected Behavior
On mobile, the layout should stack vertically and center all elements consistently: the badge icon centered above (or the icon and heading arranged in a way that doesn't leave a large left-column gap), followed by the centered subtitle and centered heading, matching the alignment style used for the paragraph and image content further down the page.
Screenshots/Logs
Environment
- Host OS: Mac Linux Windows
- Platform: Docker or Kubernetes
- Meshery Server Version: stable-v
- Meshery Client Version: stable-v
Contributor Guides and Resources
- 🛠 Meshery Build & Release Strategy
- 📚 Instructions for contributing to documentation
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack
Activity
khushal-winner commentedon Aug 16, 2026
Can I get to work on this?
Harshitera1 commentedon Aug 16, 2026
Hi @Maanvi212006, I’d like to work on this issue as my first contribution to the Layer5 project as part of the LFX Meshery AXI mentorship. I’ll investigate the mobile layout issue and work on a responsive fix.
Could you please assign this issue to me? Thank you!
Harshitera1 commentedon Aug 16, 2026
Hi @Maanvi212006
I've opened this PR to fix the mobile alignment issues on the Recognition Program page.
The changes are limited to
src/sitecomponents/App.style.jsand have been tested locally using the Samsung Galaxy A51/A71 viewport in Chrome DevTools. The local Gatsby development build completed successfully, andgit diff --checkpasses without whitespace errors.The GitHub Actions build is currently failing at the Checkout step because the
pull_request_targetworkflow refuses to check out code from the fork. The workflow therefore does not reach the actual build step.CodeRabbit review has completed, and there are no merge conflicts.
Please have a look when convenient. Thanks!