creativecommons / vocabulary

A cohesive system of design for Creative Commons
https://vocabulary-docs.netlify.app
Creative Commons Zero v1.0 Universal
2 stars 0 forks source link

[Bug] main content header background `:before` pseudo element breaks bounds of site and stretches horizontally infinitely, on larger viewports #14

Open possumbilities opened 8 months ago

possumbilities commented 8 months ago

Description

The entire page should be bound to appropriate content widths and areas. However, the header background on the main content is breaking flow bounds.

Reproduction

  1. Go to: https://creativecommons.org/2023/11/03/cc-open-infrastructure-circle/
  2. Stretch window to larger viewports
  3. See majority of site content bound, but header background continue to stretch, causing layout overflow

Expectation

The behavior should be consistent with other pages and the infinite background should bound OR avoid flow breaking shift.

Screenshots

Screen Shot 2023-11-07 at 12 38 30 PM

Additional Context

A fix here may need to be performed further up in index-prototype, but a patch fix could be applied within vocabulary-theme's style.css file.

Resolution