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
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
Contributor Guides and Resources