I added a video to the Impulse theme, and now the mobile view has a big black box in the middle, behind the text, and I can’t figure out how to remove it, or at least change the color. Please help.
Hi @CosmicG could you share your store URL?
Add this at the bottom of your custom CSS section of your Video background sections
@media screen and (max-width: 767px)
.videoBackground .videoBoxInfo {background: #fff !important}
}
It’s grayed out and doesn’t let me click at the end of the section?
So please add that CSS code at the bottom of your theme.scss.liquid file in store admin > Sale channels > Online store > Themes > Edit code > Assets
My bad, please use this code
@media screen and (max-width: 767px) {
.videoBackground .videoBoxInfo {background: #fff !important}
}
1 Like
Thank you that did turn the box white, is there any way to change the box color or make it transparent?
1 Like
Hello there,
Yes, you can change the box color or make it transparent by modifying the background property in the .videoBackground .videoBoxInfo selector.
To make the box transparent, you can use the rgba() function to set the background-color property and set the alpha value to 0. For example:
@media screen and (max-width: 767px) {
.videoBackground .videoBoxInfo {
background-color: rgba(255, 255, 255, 0) !important;
}
}
To change the color of the box, you can replace the rgb() or rgba() values with the color code of your choice. For example:
@media screen and (max-width: 767px) {
.videoBackground .videoBoxInfo {
background-color: #f1f1f1 !important;
}
}
Remember to adjust the color value according to your preference.
Codes did not work. Is there anyway to have the text to overlay the video in mobile viewing, without creating a separate box?