fossasia / fossasia/codeheat.org

Layout Issue: Full-Width Section Alignment with 1200px Content Box Cap

Open
#383 2 comments 0 reactions 1 assignee Claimed by @Ubayed-Bin-Sufian View on GitHub
Dominant language
Less
Stars
1.6k
Forks
331
PR merge metrics
No merged PRs in 30d

Description

## Description

A specific section ("About Section") requires an unusual layout configuration: the content (text/info box) must strictly adhere to the site's global 1200px content width, while the container (containing a background image) must span the full browser width (100vw).

The standard Astra settings (using percentages for container widths and fixed padding for alignment) cause the content block to drift and misalign with the rest of the site's boxed content as the viewport scales beyond 1200px.

## Setup

- **Global Content Width:** 1200px
- **About Section Parent Container:** Set to **Full Width**
- **Two containers** (70% | 30%)
- _Left container:_ Content/Info Box (`.aligned-left-col`)
- _Right container:_ Full-width background image

## Required Behavior

1. **Screens <= 1200px:** Content must use a fixed 30px left padding (to align with the left edge of other content boxes).
2. **Screens > 1200px (Standard Desktop up to 1920px):** Content must align perfectly with the 1200px content grid line, using dynamic padding.
3. **Screens > 1920px (4K/Ultra-Wide):** The dynamic padding must be capped at 200px (the required margin for 1200px content on a 1920px screen) to prevent the text from floating excessively in the screen center.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.