How can I bring the videobanner up on mobile device?

[Muselabel]

Hello,

How do you delete the spacing that’s above and under the video as you can see in the image.

my website is: 

https://muselabel.nl 

 

[BSSCommerce-TC]

Hi @Muselabel , Follow these Steps:

1) Go to Online Store > Themes > edit code

3) Find theme.liquid file

4) Add the following code above close </head> tag:

@media screen and (max-width: 769px) { 
    .videoBackground .videoBox { 
 	    min-height: max-content !important; 
        margin-top: 55px !important; 
    } 
}

=> Result:

[Muselabel]

it doesn't work for me 

[Muselabel]

Can you also help me make the header transparent on a mobile device? On the desktop, the header is already transparent.  I have the sense theme

[BSSCommerce-TC · Accepted solution]

You can try add the following code above close </head> tag in file theme.liquid

{% style %}
@media screen and (max-width: 769px) { 
    .videoBackground .videoBox { 
 	    min-height: max-content !important; 
        margin-top: 8px !important; 
        z-index: 0 !important;
    } 
}
{% endstyle %}

if It still not work, you can add the code below at the bottom of the file base.css:

@media screen and (max-width: 769px) { 
    .videoBackground .videoBox { 
 	    min-height: max-content !important; 
        margin-top: 8px !important; 
        z-index: 0 !important;
    } 
}

Result:

[Muselabel]

thank you so much it works:)

[Made4uo-Ribe]

Hi @Muselabel 

Do you mean like this? 

If it is check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

@media screen and (max-width: 769px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 0;
        margin-top: 8px;   
    }
    .fullscreen-video-wrap {
        flex-grow: 1;
}
}

• And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Dan-From-Ryviu]

Hi @Muselabel 

You can solve it by adding this code to Online Store > Themes > Customize > Themes settings > Custom CSS

@media (max-width: 749px) {
.videoBackground .videoBox {
min-height: 300px !important;
margin-top: 60px !important;
}
}