Dawn Theme: Custom Liquid Code Responsive in Mobile

Store Design
, , , , , , ,

Topic summary

A user is seeking help making custom Liquid code responsive across mobile and various devices on their Dawn theme Shopify store.

The code creates a video cover section with:

  • Overlaid text (“MEET THE NEW STYLIST ON THE BLOCK”)
  • A call-to-action button (“Watch The Film”)
  • An autoplay background video

The current implementation uses absolute positioning and viewport-based font sizing (2vh), but lacks mobile-specific responsive adjustments.

The user provided:

  • Store URL with password access (lowlyo)
  • Complete CSS and HTML code snippet

The discussion remains open with no solution provided yet. A community member requested the password to access the site for troubleshooting, which was subsequently shared.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi, I added a custom code here: https://dumgmx-0t.myshopify.com/ PW: lowlyo

I would love to make this responsive for mobile and various devices. How do I do this?

This is the code I have so far:

.video-cover { position: relative; } .video-cover .header-title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);text-align:center; z-index: 999;font-family:Halogen Regular;font-size:2vh;} .video-cover .cta-btn { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 999; padding: 20px; border-radius: 100px; border-color:#ffffff;background-color: rgba(255, 255, 255, 0.2); font-size: 15px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(8px); } video { width: 100%; height: auto; display: block; margin: 0 auto; }

MEET THE NEW STYLIST ON THE BLOCK

Watch The Film

1 Like
2

Hey @lassohair

Your website is password protected, share your website password as well.

Best Regards,

Moeed

3

Thanks! It’s: lowlyo