diff --git a/submissions/examples/mobile-alignment-fix/README.md b/submissions/examples/mobile-alignment-fix/README.md new file mode 100644 index 00000000..3a99e2aa --- /dev/null +++ b/submissions/examples/mobile-alignment-fix/README.md @@ -0,0 +1,11 @@ +# Mobile Responsive Alignment Fix + +Fixes the layout shifting and breaking bug where dashboard stats cards dropped their centered properties on narrow mobile screens. + +## Resolution +- Implemented robust flexbox property overrides inside max-width media queries. +- Normalized child container structure metrics to use clean, auto-centering margins (`margin: 0 auto`). +- Verified zero left-border text clipping down to 320px viewports. + +## Linked Issue +Closes #1232 diff --git a/submissions/examples/mobile-alignment-fix/demo.html b/submissions/examples/mobile-alignment-fix/demo.html new file mode 100644 index 00000000..8fcac62b --- /dev/null +++ b/submissions/examples/mobile-alignment-fix/demo.html @@ -0,0 +1,15 @@ + + + + + + Mobile Alignment Fix Demo - #1232 + + + +
+

CommitPulse Stats Dashboard

+

This layout component adjusts dynamically to mobile viewports. Try shrinking your browser screen under 768px to verify the layout remains perfectly centered without breaking or clipping text layout boundaries.

+
+ + diff --git a/submissions/examples/mobile-alignment-fix/style.css b/submissions/examples/mobile-alignment-fix/style.css new file mode 100644 index 00000000..b9f47dc6 --- /dev/null +++ b/submissions/examples/mobile-alignment-fix/style.css @@ -0,0 +1,45 @@ +body { + margin: 0; + padding: 0; + background-color: #0b0f19; + font-family: system-ui, -apple-system, sans-serif; + color: #f1f5f9; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} +.pulse-stats-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + max-width: 500px; + padding: 30px; + background: #111827; + border: 1px solid #1f2937; + border-radius: 12px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); + text-align: center; + box-sizing: border-box; +} +.pulse-stats-container h2 { + margin: 0 0 10px 0; + color: #38bdf8; +} +.pulse-stats-container p { + margin: 0; + color: #9ca3af; + font-size: 0.95rem; + line-height: 1.6; +} +@media (max-width: 768px) { + .pulse-stats-container { + width: 90%; + margin: 0 auto; + padding: 20px; + align-items: center; + text-align: center; + } +}