Video Background Banner Top Padding Removal

Solved

Video Background Banner Top Padding Removal

dndnomo
Tourist
4 0 2

Hi Guys! I currently have an issue with the padding of my mp4 video on mobile. If you notice on the image there is a fat padding on the top, i had the black line at the bottom but that was an easy fix. Its just the top blank padding I can not seem to remove! Any Help Would Be Amazing! Also I am using the video background code from github that is all over the community!  Currently using the Dawn Theme!

 

Screenshot 2025-01-16 215543.png

Accepted Solution (1)

Moeed
Shopify Partner
6719 1814 2198

This is an accepted solution.

Hey @dndnomo 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

<style>
@media screen and (max-width: 767px) {
.videoBox {
    min-height: auto !important;
}
}
</style>

 

RESULT:

Moeed_0-1737096863374.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 7 (7)

ShreyaRevize
Shopify Partner
55 5 11

Hey @dndnomo,

Can you please share you store URL, would love to help 🙂

Cheers!
Shreya | Revize

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com
dndnomo
Tourist
4 0 2

IslandGems.shop is the link to my store

 

websensepro
Shopify Partner
1854 215 260

Hi @dndnomo  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
dndnomo
Tourist
4 0 2

IslandGems.shop - I honestly dont know why its doing it!

 

Moeed
Shopify Partner
6719 1814 2198

This is an accepted solution.

Hey @dndnomo 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

 

<style>
@media screen and (max-width: 767px) {
.videoBox {
    min-height: auto !important;
}
}
</style>

 

RESULT:

Moeed_0-1737096863374.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


dndnomo
Tourist
4 0 2

THANK YOU SO MUCH!

Moeed
Shopify Partner
6719 1814 2198

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications