Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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;
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
I sent you a message with the details, thank you for reaching out 👍
Hello @Fogveli
Please share your website URL.
Hi, I sent you a message with all the details. thank you
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.
Thank you sooo much! It worked. You are golden! ⭐⭐⭐⭐⭐
@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
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;
}
}
@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>
@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
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;
@MandasaTech you are a golden genius. It worked! Thank you endlessly for helping out ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
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 .
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024