Problem with background video on mobile using Impulse theme

Havuhgooday
Tourist
4 0 0

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. 

Replies 6 (6)

ignelis_
Shopify Partner
22 2 4

Hi, @Havuhgooday 

 

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

Ignas | Website Developer
- Did my reply help you? Press Like to let me know!
- Did I answer your question? Mark it as an Accepted Solution
- Hire me! WhatsApp: +37062284670
Havuhgooday
Tourist
4 0 0

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_
Shopify Partner
22 2 4

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;
}
Ignas | Website Developer
- Did my reply help you? Press Like to let me know!
- Did I answer your question? Mark it as an Accepted Solution
- Hire me! WhatsApp: +37062284670
Havuhgooday
Tourist
4 0 0

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_
Shopify Partner
22 2 4

@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

Ignas | Website Developer
- Did my reply help you? Press Like to let me know!
- Did I answer your question? Mark it as an Accepted Solution
- Hire me! WhatsApp: +37062284670
Havuhgooday
Tourist
4 0 0

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?