Space after video banner on mobile viewing

Shopify Discussion
1

I have got the solution on how to put text overlay and button on a video as IMAGE BANNER from this topic.

Solved: Re: Text overlay and button on mp4 video - Shopify Community

It works perfectly on desktop viewing, but unfortunately, there is a large space after the video. Please help me on how to remove this thanks.

mobile.png
mobile.png1014×1348 89.9 KB

2

Hi @AK313

Would you mind sharing your store’s URL so we can provide a solution for that?

Thanks!

3

Hi @JHKCreate this is the page Off-Court Organic Collection – smashsportswear

password: test123

thanks

4

Add this code to the end of your section-image-banner.css file:

@media screen and (max-width: 749px)
{
.banner__media.media.placeholder {
    height: auto!important;
}
}

Let me know if that works!

5

Thank your for the code @JHKCreate I copied and paste into section-image-banner.css I tried but unfortunately nothing changed.

6

On line 48 you should have this content:

.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 39rem;
  }

Replace 39em by auto instead. That should do it!

7

I tried auto but it didn’t work. But I played with the height, and at last height: 24rem perfect for the video.

Thank you so much for your help.

8

Great! :wink: