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

[amaan-bhati]

Thank you for the before and after screenshots - they make the fix very easy to assess visually, and the footer alignment improvement on mobile is clear. Using 996px to match the project's existing breakpoints is a sensible choice.

One issue still needs to be addressed before this is ready:

Issues to be Considered:

• The CSS still uses text-align: -webkit-center on both .footer__copyright+div and .footer__icons.footer. This is a non-standard, deprecated vendor-prefixed value that does not work in Firefox and may produce inconsistent results across browsers. Please replace both instances with the standard text-align: center. An earlier automated review noted this as resolved, but the current diff still shows the deprecated value in both rules.

• The media query block is missing a blank line and indentation consistency - the .footer__copyright+div selector opens flush against the @media rule. Minor formatting point but worth keeping clean to avoid noisy diffs.

One targeted fix and this should be good to go. Thank you for sticking with it!

[khanparaYash]

Thanks for the detailed feedback!

I’ve replaced the deprecated -webkit-center with the standard center value and cleaned up the media query formatting for consistency.

Please take another look.