Video in hero banner with overlay

BenBro
Visitor
1 0 0

Hi there,

 

I am looking to create a hero banner that loops video for my brooklyn theme - I am trying to make this display with zero padding [hugging against the top of the webpage, and zero padding on the bottom]. Ideally, I would like to make this element responsive so that I can have one version that displays only on DT, a one that displays on mobile [so that I can export 2 different aspect ratio videos for better experience].

 

I have followed a guide to install this within my sections folder in the code, but I am getting a large white box above the video when adjusting position to the top of the page [page order]. I have found the code in chrome upon inspect as to why it is doing this, and when I uncheck this, you can see that the positioning corrects itself, but can't figure out where to adjust this in the liquid/ source:

 

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 110px;
}

If anyone has any experience on fixing this, as well as a set of rules to create a breakpoint on a section to hide on mobile/ desktop, it would be much appreciated!

 

Other resources:

Code that was used to create section 

Screen Shot 2022-03-18 at 9.59.44 AM.png

Replies 2 (2)

LitCommerce
Astronaut
2860 684 732

Hi @BenBro,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

blowerband
Tourist
10 0 1

You site is great!  How did you end up getting such a fast loading hero video to play?  if you dont mind sharing?