⚠️ HORIZONTAL OVERFLOW DETECTED
Overflow Monitor
Viewport: -
Document: -
Body: -
Overflow: -
ScrollX: -

Horizontal Overflow Test

Testing Genesis Theme overflow fixes

Test Controls

Standard Content

This is a standard paragraph of text that should stay within the viewport boundaries. No horizontal scrolling should occur when viewing this content on mobile devices.

Responsive Grid

Card 1

Grid items should stack on mobile and expand on larger screens without causing overflow.

Card 2

Each card has max-width: 100% and min-width: 0 to prevent grid overflow.

Card 3

Testing responsive grid behavior with auto-fit and minmax.

Wide Content Container

This container has width: 100% and max-width: 100% with overflow-x: hidden. It should never extend beyond the viewport width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Test Results

✓ Expected Behavior

  • No horizontal scrollbar at any viewport size
  • Viewport width = Document width
  • Body width ≤ Viewport width
  • Overflow status shows "NONE"
  • ScrollX remains at 0
  • Fixed nav slides in from right without causing overflow

Fixed Navigation

This drawer slides in from the right using transform: translateX(100%) instead of right: -100%.

This approach prevents layout overflow and performs better.

Navigation Items