Footer icons layout breaks on some mobile devices

Footer icons layout breaks on some mobile devices

Description

The footer social icons layout breaks on certain mobile devices (especially Chrome and Firefox on smaller screens).
Instead of appearing in a single row or clean grid, the icons are rendered in an uneven multi-column layout, which affects visual consistency and user experience.

This behavior is not consistent across all devices, which makes it difficult to detect without testing on multiple phones.

---

Steps to Reproduce

1. Open the PipeCD documentation website on a mobile device.
2. Scroll down to the footer section.
3. Observe the alignment of the social icons (GitHub, Twitter, Slack, Email, etc.).

---

Expected Behavior

• Footer icons should appear in a consistent layout on all mobile devices.
• Icons should be aligned either:
  • in a single horizontal row, or
  • in a clean responsive grid.
• Spacing between icons should remain uniform across devices.

---

Actual Behavior

• On some phones, icons appear in two vertical columns or misaligned rows.
• Spacing becomes inconsistent.
• Layout looks broken compared to desktop and some mobile devices.

---

Screenshots

Broken layout on mobile

---

Possible Cause

The issue may be related to:

• Usage of list-inline and flex utilities in Bootstrap.
• Responsive column behavior (col-*) causing unpredictable wrapping on small screens.
• Limited horizontal space on certain device widths.

---

Suggested Fix (High-level)

• Replace list-inline based layout with a Bootstrap grid-based layout for footer icons.
• Ensure mobile-first responsive behavior where icons stack or align predictably.
• Avoid relying solely on flex wrapping for icon alignment on small screens.

---

Environment

• Devices: Some Android and iOS smartphones
• Browsers: Mobile Chrome, Mobile Firefox
• Screen sizes: Small-width devices (< ~360px)

---

Additional Notes

This issue affects the visual quality and responsiveness of the footer and could be improved to match the responsiveness standards of CNCF and similar documentation websites.

---

Start by reproducing the footer layout on small-width Android and iOS devices in mobile Chrome and Firefox, then inspect the footer's Bootstrap list-inline, flex, and responsive column behavior. Adjust the mobile layout so the icons form a consistent row or grid with uniform spacing, and verify it against the reported screen widths and desktop behavior.