Shopify themes, liquid, logos, and UX
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
Hi @BenBro,
Please send your site and if your site is password protected, please send me the password. I will check it.
You site is great! How did you end up getting such a fast loading hero video to play? if you dont mind sharing?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024