Video banner doesn't scale correctly on mobile

Store Design
, , , ,
1

Hi All,

Recently installed a 3rd party theme onto Shopify that supports 2.0. Slideshow video banner scales correctly on desktop but not on mobile. Portions of the video is not being shown because of the improper scaling. Any way to automatically scale the video properly on smaller devices like mobile?

Here is a link to the preview of the website, as I have not published yet. Want to get this resolved first: https://ip9hg9x9p0bst1me-33495875722.shopifypreview.com

1 Like
2

Hi,

It can be fixed wit code changes in theme files for mobile screen. You need to apply css in video section

3

On your homepage, where it says Add Custom CSS, try:

#myVideo{
    width: 100vw;
}

.bg-overlay-theme-black-30:before {
background: none;
}

Does this work?

1 Like
4

Awesome! That worked. It scaled the video perfectly but now I have dead white portions above and below the video on mobile. Something that does not exist on desktop:

https://ip9hg9x9p0bst1me-33495875722.shopifypreview.com

5

Type this also in the Add Custom CSS:

media (max-width: 991px)
.ltn__slide-item-7 {
    min-height: 200px;
}

and adjust that number as needed.

Did that work?

6

Unless I did something wrong, It didn’t do anything. I pasted the code you gave me directly after the previous code. I adjusted the “max width” number and I adjusted the “min-height” number. No changes.

7

Try typing it like this:

@media screen and (max-width 991px){
.ltn__slide-item-7 {
    min-height: 200px;
}
}

Let me know if it works correctly now.

8

Nope. Don’t see anything changing at all. Is there a piece of information I can possibly share with you to help you pin point the correct type of code?

9

Yeah, this might be easier if I could see your files. Could you send me an email at zqdo.tech@gmail.com?

Thanks.

10

Hi @VehicleVirals

I do not see the video was cropped. When you mean scale the video, do you mean to have it in portrait in mobile instead of landscape?

11

David above helped me scale the video properly which is why it no longer looks cropped. Before it was portrait and a huge portion of the video was cropped. Now my only issue is the dead (white) space above and below the video on mobile. Still has the portrait space even though the video is now landscape.