Skip to content

[Bug] Misaligned Header Text on About Page for Small Screens – UI Padding Issue #4677

@mohan-marwari

Description

@mohan-marwari

Describe the bug
The header text on the About page is misaligned on small screens (devices with width below 991px). It lacks proper padding, resulting in the text being cramped toward the left side. The issue arises due to the incorrect padding applied in the CSS file at the specified line.

To Reproduce
Steps to reproduce the behavior:

  1. Open https://commonvoice.mozilla.org/en/about in a browser.
  2. Resize the browser window to a width smaller than 991px or open the page on a mobile device.
  3. Observe the header text alignment in the "About" section.
  4. Notice that the text is too close to the left edge, making it look poorly aligned.

Expected behavior
The header text should have proper padding on both sides (left and right) to ensure that it appears well-aligned and centered on smaller screens. This will improve the user interface and readability of the "About" section.

Screenshots
Below are the screenshots demonstrating the issue and the expected behavior after the fix:

Before Fix (Current Behavior):
(The text is misaligned and cramped towards the left side on smaller screens.)
commonvoice mozilla org_en_about(Pixel 7) (1)

After Fix (Expected Behavior):
(The text is properly aligned with padding on both the left and right sides.)
commonvoice mozilla org_en_about(Pixel 7)

Code Context
The issue is located in the following CSS file:

File Path:
web/src/components/pages/about/why-common-voice.css

Line Number:
36 - 49

Relevant Code:

& .about-header-text {
    position: relative;
    @media (--lg-up) {
        max-width: 560px;
        width: 100%;
        &:first-child {
            margin-inline-end: 50px;
        }
    }
    @media (--md-down) {
        padding-right: 1.25rem;  /* Current code causing the issue */
    }
}

Proposed Solution
Replace the following code on line 48:
padding-right: 1.25rem;

With:

padding: 0 1rem;

This change ensures that the padding is applied on both the left and right sides, making the header text look properly aligned on small screens.

Desktop or Mobile (please complete the following information):

  • Device: moto g85 5g
  • OS: Android 14
  • Browser: Chrome
  • Browser Version: Chrome 129.0.6668.102:

Additional context
I am happy to work on this issue and have already identified the fix. If you approve, I will fork the repository, make the necessary changes, and submit a Pull Request (PR).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions