-
Notifications
You must be signed in to change notification settings - Fork 859
Description
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:
- Open https://commonvoice.mozilla.org/en/about in a browser.
- Resize the browser window to a width smaller than 991px or open the page on a mobile device.
- Observe the header text alignment in the "About" section.
- 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.)
After Fix (Expected Behavior):
(The text is properly aligned with padding on both the left and right sides.)
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).