57 lines
1.2 KiB
Markdown
57 lines
1.2 KiB
Markdown
# Fix main content width on mobile devices
|
|
|
|
**Task ID:** 009
|
|
**Date Created:** 2025-07-08
|
|
**Author:** Gemini
|
|
|
|
---
|
|
|
|
## Task Description
|
|
|
|
The main content area of the landing page does not extend to the full width of the screen on mobile devices, leaving a white bar on the side. This task is to fix the styling to ensure the main content utilizes the entire screen width.
|
|
|
|
---
|
|
|
|
## Instructions
|
|
|
|
- Identify the CSS rule or element style causing the width issue.
|
|
- Modify the appropriate CSS file to ensure the main content area spans the full width.
|
|
- Verify the fix on mobile screen sizes.
|
|
|
|
---
|
|
|
|
## Input Data
|
|
|
|
- Image of the issue: `ai_docs/images/failire_main_not_full_with.png`
|
|
|
|
---
|
|
|
|
## Expected Output
|
|
|
|
- The main content area should be full-width on mobile devices, with no horizontal white space.
|
|
|
|
---
|
|
|
|
## Constraints & Requirements
|
|
|
|
- The fix should not negatively impact the layout on desktop devices.
|
|
|
|
---
|
|
|
|
## References (Optional)
|
|
|
|
- `src/app/layout.tsx`
|
|
- `src/app/globals.css`
|
|
|
|
---
|
|
|
|
## Metadata
|
|
|
|
| Key | Value |
|
|
|-----------------|------------------|
|
|
| Priority | High |
|
|
| Status | Done |
|
|
| Tags | CSS, Mobile, Fix |
|
|
|
|
---
|