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:
