Dawn Theme: Custom Liquid Code Responsive in Mobile

[lassohair]

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:

<style>

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

}

</style>

<div class="video-cover">

<a class="header-title">MEET THE NEW STYLIST ON THE BLOCK</a>

<!-- Call to action button -->

<a class="cta-btn button" href="Add your site URL here">Watch The Film</a>

<video muted autoplay playsinline loop>

    <source src="https://cdn.shopify.com/videos/c/o/v/c6bf78b417dd4bdc88d757b8a9fd7c51.mp4" 

            type="video/mp4">

    <source src="https://cdn.shopify.com/videos/c/o/v/c6bf78b417dd4bdc88d757b8a9fd7c51.mp4" 

            type="video/mp4">

</video>

[Moeed]

Hey @lassohair 

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

Best Regards,

Moeed

[lassohair]

Thanks! It's: lowlyo