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
- Open the PipeCD documentation website on a mobile device.
- Scroll down to the footer section.
- 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.
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
Expected Behavior
Actual Behavior
Screenshots
Broken layout on mobile
Possible Cause
The issue may be related to:
list-inlineand flex utilities in Bootstrap.col-*) causing unpredictable wrapping on small screens.Suggested Fix (High-level)
list-inlinebased layout with a Bootstrap grid-based layout for footer icons.Environment
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.