Fix mobile recognition page alignment

[Harshitera1]

Description

Fixes responsive alignment issues on the Layer5 Recognition Program page for mobile viewports.

Resolves #101.

Changes Made

• Fixed the Recognition Program logo alignment on mobile screens.
• Centered the program logo consistently within the mobile layout.
• Removed the floating behavior of the logo on smaller screens.
• Adjusted spacing around the "Try Now" text for mobile viewports.
• Corrected badge-step spacing on smaller screens.
• Preserved the existing desktop layout and overall page design.
• Limited the changes to src/sitecomponents/App.style.js.

Testing

• Tested the page locally using the Gatsby development server.
• Verified the mobile layout using Samsung Galaxy A51/A71 viewport dimensions in Chrome DevTools.
• Confirmed the Gatsby development build completes successfully.
• Ran git diff --check successfully with no whitespace errors.

Screenshot

The updated mobile layout is shown below:

Checklist

• Tested locally
• Verified responsive/mobile layout
• Ran git diff --check
• Changes are limited to the required file

Summary by CodeRabbit

• Style
  • Improved the mobile layout by centering the program logo and constraining its width.
  • Adjusted mobile “Try now” text spacing for better visual alignment.

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 64a370ac-8f7e-476b-a308-6323d9cf3745

📥 Commits

Reviewing files that changed from the base of the PR and between 0090670 and 5527840.

📒 Files selected for processing (1)

• src/sitecomponents/App.style.js

Included review availability: Your plan includes up to 1 review per rolling hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The 768px media query now centers the program logo and resets the mobile “try now” text top margin. Existing responsive figure, container, badge-step, and banner-heading rules remain.

Changes

Mobile layout

Layer / File(s)	Summary
Responsive logo and text styling src/sitecomponents/App.style.js	The mobile .program-logo uses centered block layout with automatic width and a fixed maximum width. The .try-now-txt top margin is reset. Existing responsive styles remain.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to 55278

This localized styling change adjusts mobile alignment and spacing while preserving the desktop layout; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the mobile alignment fixes made to the recognition page.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Maanvi212006]

1. Mention the issue its resolving in the PR description
2. One commit is missing sign-off. You csn follow the steps given here to resolve it

[Harshitera1]

Hi @Maanvi212006 , I’ve addressed both requested changes and requested a re-review on the PR. Please take a look when you get a chance. Thank you!

[RaIyAn90]

Hi @Harshitera1,

The mobile UI fix looks consistent now.

I'm wondering about one thing which you mentioned in your PR that is - adjusting the spacing around the "Try Now" text on mobile, where do you find this in that specific section of UI. Since the linked issue #101 only covers the hero badge and heading alignment, if I've missed it please point it out, otherwise it might be better to remove that change from this PR.

Also, please address the points @Maanvi212006 raised. And your latest commit isn't signed off yet, that needs to be done as well

[Harshitera1]

Hi @RaIyAn90 , thanks for the review. I removed the mobile Try Now spacing adjustment since it wasn't part of the scope of issue #101. I also addressed the points raised by @Maanvi212006 and amended the existing commit with the required signature. The production build was also verified locally. Thanks!

[Maanvi212006]

LGTM!

[RaIyAn90]

LGTM