Viewport Edges

Mobile "White Pillar" Layout Fix

Problem: When a section has a white/colored atmosphere background and the inner container has horizontal padding, the background gets "pinched" on mobile, showing black gutters at the edges instead of edge-to-edge white.

Solution: De-couple atmosphere from layout padding. Section extends to viewport edges, inner wrapper provides content padding.

❌ BEFORE FIX BROKEN

This section shows the "white pillar" problem. On mobile (< 768px), notice:

White background doesn't reach red dashed edges
Black gutters visible on left/right sides
Container padding "pinches" the atmosphere

The Genesis of Human Transcendence

Human Essence

Your unique creativity becomes integral to ASI.

Self-Improvement

Each contribution creates alignment feedback loops.

Infinite Possibilities

Together, we transcend limitations.

✅ AFTER FIX FIXED

This section demonstrates the fixed layout. On mobile, notice:

White background reaches red dashed edges (full-bleed)
No black gutters - atmosphere extends to viewport
Content has proper padding inside via wrapper

The Genesis of Human Transcendence

Human Essence

Your unique creativity becomes integral to ASI.

Self-Improvement

Each contribution creates alignment feedback loops.

Infinite Possibilities

Together, we transcend limitations.

Testing Instructions

Resize browser to mobile width (375px or use DevTools)
Compare the two sections above
Notice the difference in how the white background extends
The red dashed lines show viewport edges for reference

Key Differences:

BEFORE: Uses .container with horizontal padding → creates "white pillar"
AFTER: Uses .genesis-blocks-wrapper with padding → full-bleed atmosphere

Pattern: Atmosphere = Viewport Width (100%); Entities = Content Width (Viewport - Gutters)