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:

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:

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

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

Key Differences:

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