How to adjust the text overlay position in a video background using Dawn theme?

Topic summary

Adjusting the text overlay position on a custom video background in Shopify’s Dawn theme. The OP wanted the overlay moved to the top-left with a white box and proper text wrapping.

Process and outcomes:

  • URL shared; helper reviewed the homepage video banner and iterated via screenshots to refine placement: top-left, inset margins, squarer box, multi-line text.
  • Final solution provided via CSS using flexbox to align content to the top-left and style the overlay box:
    • .hero { display: flex; justify-content: flex-start; align-items: flex-start }
    • .hero > div { width: 43rem; padding: 20px 1%; height: 50%; background: white; margin-top: 2%; margin-left: 2% }
  • OP implemented the changes and confirmed it looks right.
  • A mobile issue (white box overflowing the screen on the right) was raised and then self-resolved by the OP (no code shared).

Notes:

  • Screenshots were central to aligning the design and confirming the styling.
  • The original Liquid/Schema code controls video URL, poster image, opacity, blur, and CTA text/link; the overlay positioning was handled purely in CSS.

Status:

  • Main issue resolved. A separate question about adding a video background to the header in Dawn remains unanswered in this thread (OP noted other themes like Motion support it).
Summarized with AI on January 1. AI used: gpt-5.

Sorry, one more question…

How do I make it so the white box is contained within the limits of the page/screen on mobile?

See screenshot - the right side hangs over the edge of the screen but want it to look like the left side does, please.

Thanks.