Re: Video background "border" on mobile

Solved

How can I remove the black border from my mobile video background?

Joppe1612
Tourist
12 0 0

Hey, I'm pretty new to Shopify and building  websites overall, but I've added a video background to my store and on the desktop version it looks perfect but on the mobile version I have a black "border" or something I want to remove (See image). If someone knows how I can remove the black "border" please let me know! 

Accepted Solutions (3)

Moeed
Shopify Partner
4892 1292 1566

This is an accepted solution.

Hey @Joppe1612 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

-Need a Shopify Specialist? Chat on WhatsApp
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Artzen_tech
Shopify Partner
552 113 112

This is an accepted solution.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

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

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

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Moeed
Shopify Partner
4892 1292 1566

This is an accepted solution.

Hey @Joppe1612 

 

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) {
.videoBoxInfo {
    padding: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1696227354051.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
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 6 (6)

Artzen_tech
Shopify Partner
552 113 112

Hello @Joppe1612 
Its Artzen Technologies! We will be happy to help you today.


Please send your store url


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Joppe1612
Tourist
12 0 0

/

Artzen_tech
Shopify Partner
552 113 112

This is an accepted solution.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

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

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

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

Moeed
Shopify Partner
4892 1292 1566

This is an accepted solution.

Hey @Joppe1612 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

-Need a Shopify Specialist? Chat on WhatsApp
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Joppe1612
Tourist
12 0 0

Here it is: /

Moeed
Shopify Partner
4892 1292 1566

This is an accepted solution.

Hey @Joppe1612 

 

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) {
.videoBoxInfo {
    padding: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1696227354051.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
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️