Re: Background video on mobile has a black border

Solved

Background video on mobile has a black border

Fogveli
Excursionist
23 0 4

Screenshot_20230104-080705.png

Does anyone know how I can get rid of the black border at the bottom of my video background? I created a video-background.liquid in Sections on edit code. On desktop everything looks ok I even got rid of the excess empty background under it, but on mobile I still see that black thick border. Thanks for the help 

Accepted Solutions (2)
MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

Hello @Fogveli,
Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
padding: 0px !important;
}

}

 

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

@Fogveli 

1. Go to Online Store-> Section -> Video section
2. Find this CSS class on video section - ".videoBackground .videoBox" Using of (ctrl+f) .
3. Now replace min-height: 380px !important; to min-height: 300px !important;

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 14 (14)

GemPages
Shopify Partner
5625 1262 1247

Hello @Fogveli 

 

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Fogveli
Excursionist
23 0 4

I sent you a message with the details, thank you for reaching out 👍

MandasaTech
Shopify Partner
723 146 153

Hello @Fogveli 
Please share your website URL.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Fogveli
Excursionist
23 0 4

Hi, I sent you a message with all the details. thank you

MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

Hello @Fogveli,
Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
padding: 0px !important;
}

}

 

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Fogveli
Excursionist
23 0 4

Thank you sooo much! It worked. You are golden!

Fogveli
Excursionist
23 0 4

Screenshot_20230104-120225.png

@MandasaTech coming back with another issue. Your solution worked wonders and the black border is gone, but now I have a huge space gap between the header and the video (still only on mobile) on desktop everything is ok. Could this also be solved from the code? Thank you! I really appreciate your help

MandasaTech
Shopify Partner
723 146 153

@Fogveli 


Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

 

@media screen and (max-width: 767px){
.videoBackground .videoBox {
min-height: 300px !important;
}
}

 

 

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Fogveli
Excursionist
23 0 4

@MandasaTech just did it and unfortunately it did nothing. 

MandasaTech
Shopify Partner
723 146 153

@Fogveli 
1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before </body> 


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

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Fogveli
Excursionist
23 0 4

 @MandasaTech Nothing. I'm beginning to suspect it could be because bottom margin of header. I adjusted it to 0px and for desktop now I have no space between header and video which is perfect but it didn't also make a difference for mobile. It is still the same

PXL_20230104_104202138.jpg

PXL_20230104_104531756.jpg

MandasaTech
Shopify Partner
723 146 153

This is an accepted solution.

@Fogveli 

1. Go to Online Store-> Section -> Video section
2. Find this CSS class on video section - ".videoBackground .videoBox" Using of (ctrl+f) .
3. Now replace min-height: 380px !important; to min-height: 300px !important;

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Fogveli
Excursionist
23 0 4

@MandasaTech you are a golden genius. It worked! Thank you endlessly for helping out

StillScorin
Visitor
2 0 0

Hey Ive been following the help on this thread as I was going through similar problems but everything was fine but now on my homepage if i try to add anything new my footer menu overlaps it and i cant figure out how to fix it . ss.png