White line under video

Technical Q&A

Topic summary

A user encountered a white line appearing below a custom CSS video element on mobile devices, though it displayed correctly on desktop. The issue was resolved by adding specific CSS code to the theme’s base.css file:

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Edit code
  • Add CSS targeting .multicolumn .page-width with margin-top: -1px !important within a media query for screens with max-width 989px
  • This negative margin removes the unwanted white space

Additional tip shared:
The original poster also addressed a related issue where videos don’t autoplay on iPhones in low power mode. They shared a JavaScript workaround that triggers video playback when users touch the screen or scroll, implemented by adding event listeners to the theme.liquid file before the closing </body> tag.

Both solutions were confirmed working by the original poster.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I’m using a custom css video with a shop button on my homepage. It works perfectly on a desktop but when viewed on mobile you can see a white line under the video before the next header.

Here’s the code i’m using for the video. What do I need to change to remove the white line in the screenshot below?

Shop
.overlaybutton video{ width: 100%; height: auto; display: block; margin: 0 auto; } .overlaybutton{ position: relative; } .overlaybutton::after{ top: 0%; left: 0%; position: absolute; background: rgba(255,255,255,0.2); z-index: 5; content:[https://www.kicklocker.co.uk/collections/frontpage](https://www.kicklocker.co.uk/collections/frontpage); display: block; height: 100%; width: 100%; } .overlaybutton a{ top: 50%; left: 50%; position: absolute; padding: 10px 15px; font-size: 16px; color: #ffffff; background: #000000; border-radius: 10px; line-height: 20px; z-index: 1; text-decoration: none; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

IMG_1666.jpg
IMG_1666.jpg1290×2538 177 KB

2

Hi @KickLocker ,

To remove whiteline under video, follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select base.css.

6.Paste the following code and save

@media screen and (max-width: 989px) {
.multicolumn .page-width{
    margin-top: -1px !important;
}
}

Result:-

Sweans_0-1725855179114.png
Sweans_0-1725855179114.png504×778 202 KB

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

1 Like
3

Thank you that worked!

4

Also thought i’d share… was struggling with another issue around the video not autoplaying on an iPhone if its in low power mode. There isn’t a full solution but there is a workaround.

If you add this code to your theme.liquid near the bottom before the tag, then if the device is in low power mode, once the user touches anywhere on the screen or scrolls the video will autoplay and stay playing.

<script>
        Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
          get: function () {
          return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
          }
        });
        
        document.body.addEventListener("click", playVideoOnLowPower);
        document.body.addEventListener("touchstart", playVideoOnLowPower);
      
        function playVideoOnLowPower(){
          try{
          const videoElements = document.querySelectorAll("video");
          for (i = 0; i < videoElements.length; i++) {
            if (videoElements[i].playing) {
            } else {
            videoElements[i].play();
            }
          }
          }
          catch(err) {
          console.log(err);
          }
        }
    </script>