Black bar around video banner on mobile- Story Theme

Solved

Black bar around video banner on mobile- Story Theme

cslezak97
Tourist
4 0 0

I have tried researching online and looking through countless forums and cannot for the life of me figure out how to get rid of the black bar on the top and bottom of my video banner. It only shows up on mobile. I am using Story theme. Any help would be massively appreciated!

 

Screen Grab.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10112 2009 2061

This is an accepted solution.

Please add this code to Custom CSS of text section below video section 

.section-text { margin-top: -43px; position: relative; }

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

PageFly-Theodor
Shopify Partner
691 86 102

Hi @cslezak97 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Black Bar Around Video Banner On Mobile- Story Theme, let’s try this solution:

Online Store ->Theme ->Edit code
Assets ->Base.css

.section{
	padding: 0 !important;
}

or you can give me the URL


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

cslezak97
Tourist
4 0 0

Thank you! Although, I actually don't have Base.css in my assets. Below is my store link.

 

https://wicklesports.com/

Dan-From-Ryviu
Shopify Partner
10112 2009 2061

Hi @cslezak97 

Could you share your store link?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

cslezak97
Tourist
4 0 0

Below is my store link:

 

https://wicklesports.com/

Dan-From-Ryviu
Shopify Partner
10112 2009 2061

Hi @cslezak97 

That black bar belong to your video soScreenshot 2023-11-13 at 09.33.36.png

But you can add this css code to Custom CSS of that video section to remove that black bar at the top

.video-background-wrapper {
margin-top: -20px !important;
}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

cslezak97
Tourist
4 0 0

Thank you so much, that worked for the top of the video! Do you know how to do the same thing for the bottom of the video? I tried adding this after but it didn't do anything:  

 

margin-bottom: -20px !important;  

Dan-From-Ryviu
Shopify Partner
10112 2009 2061

This is an accepted solution.

Please add this code to Custom CSS of text section below video section 

.section-text { margin-top: -43px; position: relative; }

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.