Fix/footer bug for mobile view

[khanparaYash]

What has changed?

This PR fixes the footer alignment issue on mobile view by properly centering the footer content.

The following changes were made:

• Added CSS rules to center-align footer elements on mobile screens.
• Replaced incorrect className attribute with class in HTML to ensure proper rendering.

This PR Resolves #(issue_number)

Type of change

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

• Ran npm run build successfully without errors.
• Ran npm run serve and verified the footer alignment on mobile view.
• Confirmed that the footer content is now properly centered and responsive.

(Screenshots attached showing before and after changes.)

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.

-Before fix (misaligned footer)

After fix (centered footer on mobile)

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[khanparaYash]

Kindly review this PR when possible. Thank you!

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Previous Issues - Now Resolved

The two warnings from the previous review have been fixed:

• src/css/custom.css:521 - Using -webkit-center is a non-standard, deprecated vendor prefix → Fixed: Now uses text-align: center
• src/css/custom.css:525 - Same issue with -webkit-center → Fixed: Now uses text-align: center

Files Reviewed (1 file)

• src/css/custom.css - 0 issues (previous issues fixed)

---

_{Incremental review of commit changes since 11da2bc}

---

_{Reviewed by claude-4.5-opus-20251124 · 74,320 tokens}

[khanparaYash]

change suggestion

[amaan-bhati]

Thank you for catching the className to class correction in docusaurus.config.js and for the mobile footer fix — the intent here is clear and appreciated.

A couple of things to address before this is ready to merge:

Issues Found

1. CSS rules not scoped to mobile

The new rules .footer__copyright+div and .footer__icons.footer have no media query, which means the center-alignment applies at all screen sizes. If the footer is intentionally left-aligned on desktop this could be an unintended regression. Please wrap these in an appropriate media query:

@media (max-width: 768px) {
  .footer__copyright+div {
    text-align: center;
  }
  .footer__icons.footer {
    text-align: center;
  }
}

Unless center-alignment is intentional for all viewports, in which case please confirm that explicitly.

2. Missing screenshots

Please provide before/after screenshots showing both mobile and desktop views to confirm there is no desktop regression.

Please also rebase against main before resubmitting as there are merge conflicts with other open PRs touching the same file.

[khanparaYash]

Used 996px to match existing breakpoints and maintain consistent responsive behavior across the project.

mobile view Aefore changes

mobile view After changes

desktop view Before changes

desktop view After changes