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.
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).