Adjust video banner height for mobile version

[ritualstash]

Hi,

I need help adjust the height of my video banner for mobile version only please. It looks fine on desktop. I see that rest of the homepage is eating into the footer menu and looks very messy. Thanks in advance. ritualstash.com 

[Mehran_Ali]

Hi @ritualstash 

Hope You're Doing Well

The banner and the many issues will be resolved by adding this CSS to your base.css file 

Open the theme -> three dots -> code Editor -> search for base.css -> add this CSS at the end 

@media(max-width:991px){
     .menu-drawer-container[open] .menu-drawer {
         visibility: visible;
         transform: unset;
         height: 85vh;
         transition: ease 500ms;
    }   
}

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

Note: If you need any more assistance feel free to contact me 

[ritualstash]

Hi, 

Thank you for your response. But that did not work. The footer is still mixed up with last multi column.

[DaveedValencia · Accepted solution]

Add the below code to fix this.

@media only screen and (max-width: 600px) {
#shopify-section-sections--21993620766994__footer{
margin-top:500px!important;
}
}

The issue is being caused by conflicting CSS, adding this will override the other conflicts. 

[ritualstash]

Thank you. That worked well!