Apply specific min height & padding to banner for each device?

Site URL: https://www.dtr.media/

Hello,

I'm trying to remedy an issue with my site where the home page banner/video is displayed with proper dimensions on all devices. When loading the site it looks fine on my laptop, but on a tablet or desktop PC you can start to see the text below the video banner rather than only seeing the video and needing to scroll down to start revealing the other pages. On mobile, the banner has it's length reduced by about 25%, leaving a blank space between the banner and the next page. 

The best fix I've found is to adjust the "Minimum Height" and "Padding (Overlay Pages)" in"Index: Page" under Site Styles, but each device type needs different height and padding values in order to look right.

Is there a way to force specific height and padding values for each device via CSS? Or another way to have the site adjust responsively?

Thanks for any help and I hope that made sense!