Video banner doesn't scale correctly on mobile

Store Design
, , , ,

Topic summary

A user installed a third-party Shopify 2.0 theme where the slideshow video banner displays correctly on desktop but scales improperly on mobile devices, cutting off portions of the video.

Initial Solution:

  • Custom CSS was applied to fix the video width (width: 100vw), which resolved the cropping issue and made the video display in landscape orientation on mobile.

Current Issue:

  • Dead white space now appears above and below the video on mobile devices (portrait-oriented space remains despite landscape video).
  • Additional CSS attempts using min-height adjustments and media queries have not resolved the white space problem.

Status:

  • The conversation remains ongoing with troubleshooting in progress.
  • One helper offered to review the theme files directly via email to provide a more targeted solution.
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
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.