{"product_id":"full-width-and-sizing-of-banner-brooklyn","title":"Full Width and Sizing of Banner","description":"\u003cp class=\"task-lead\"\u003eA skincare brand's video hero banner had limits they'd run into: it wouldn't go full-screen and the sizing was inconsistent across devices.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'm using the background video block as a hero at the top of the page but I've hit limitations. It's not coded to be full-screen and the sizing changes depending on the device.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe theme's built-in video block was designed as a content section, not a hero. The brand wanted it to fill the viewport on every screen.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe reworked the hero to fill the full viewport on desktop and tablet, with a properly sized fallback on phones so it doesn't chew through data. The brand controls the video, the poster image, and the overlay text from the theme editor.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-viewport video hero on desktop and tablet\u003c\/li\u003e\n\u003cli\u003eSized fallback for phones\u003c\/li\u003e\n\u003cli\u003eOverlay text and poster controlled in the theme editor\u003c\/li\u003e\n\u003cli\u003eConsistent sizing across screen sizes\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154830094410,"sku":"TASK-0015","price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/www.taskhusky.com\/products\/full-width-and-sizing-of-banner-brooklyn","provider":"TaskHusky","version":"1.0","type":"link"}