Problem with background video on mobile using Impulse theme

[Havuhgooday]

I am using the impulse theme and love the capabilities. The problem I am having is when using the video hero section with transparent header (background video is in full screen mode) everything looks great in desktop mode. When i am previewing the website using my iphone during the page load up, These "cinematic" type of black bars slowly fill in the top and bottom edges of the video. It makes the top and bottom edge of that section look funny. Any way to remove these?

This is a screen capture on my iphone you will see as i reload the black bars slowly fill top and bottom of video section. 

[ignelis_]

Hi, @Havuhgooday 

Can you share the url of your store along with the password (if needed)? Thanks!

[Havuhgooday]

https://lrp0kx0yc7s6ttxo-67748266302.shopifypreview.com

This is the preview let me know if this works. My live store is using a different theme. I am building this behind scenes so-to-speak.

[ignelis_]

Thanks for sharing the url @Havuhgooday 

Try going to your theme > Edit Code > base.css and add this code at the very bottom:

#shopify-section-template--21418533224766__81f3567d-e819-415a-8374-c7491eec9f74.hero__media {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    height: 105% !important;
}

[Havuhgooday]

Thank you for helping me. I do not have a base.css in the code section nor do I have a theme.css I do have a theme.css.liquid and a theme.liquid. What should I do?

[ignelis_]

@Havuhgooday okay, then go to theme.liquid or theme.css.liquid (not sure which one will have it) and paste the code above the </style> line

[Havuhgooday]

theme.css.liquid has over 10,000 lines and when i hit cntrl + F and enter in style, nothing comes up. In theme.liquid there are only a couple hundred lines and that </style> doesn not exist on that page. Any other ideas?