Video on homepage resized but off centered

Store Design
, , ,

Topic summary

A Shopify store owner implemented custom CSS to display a homepage video that resizes on mobile devices. The video successfully resized to 300% width on screens under 767px, but became left-aligned instead of centered.

The Problem:

  • Video displayed at 300% width on mobile (intentional for better screen coverage)
  • Lost center alignment, appearing justified to the left
  • Horizontal scrolling became possible, showing extra video content

The Solution:
A helper provided CSS code targeting the specific video container class:

  • Added display: flex; and justify-content: center; to center the oversized video
  • Added overflow: hidden; to prevent horizontal scrolling
  • Code placed in theme’s base.css or main.css file within a media query for screens min-width 767px

Resolution: Issue successfully resolved. The video now displays centered on mobile while maintaining the desired 300% width, with no unwanted scrolling.

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

I used the liquid code below to display a video,

I want the video to be resized when view from mobile.

It works but it is justified to the left instead of remaining centered.

How do I center the video?

You can view the website here:

www.water-iq.co

video { width: 100%; height: auto; display: block; margin: 0 auto; } @media (max-width: 767px) { video { width: 300%; }
2

Hmmm, it looks like this bit of css is causing it:

@media (max-width: 767px)
video {
    width: 300%;
}

Set this to 100% instead of 300 and you should be good to go!

3

..but I want it to be that big when the screen size is under 767px.

That way when someone views the page on mobile, the video fills the screen up more efficiently.

Is there no way to just center what is already there?

4

If you want to keep the video 300% then add the following CSS:

@media screen and (min-width: 767px) {
.section-template--22181207114042__custom_liquid_WfiRJx-padding {
    display: flex;
    justify-content: center;
}
}
5

I’m not too knowledgeable about CSS.

Could you please tell me where to put that code as if I knew nothing? :sweat_smile:

6

Lol No my fault! You can search your theme files for “base.css” or “main.css” and paste this at the very bottom:

@media screen and (min-width: 767px) {
.section-template--22181207114042__custom_liquid_WfiRJx-padding {
    display: flex;
    justify-content: center;
}
}
7

The first one you gave me worked but it gave you the ability to scroll to the right and see extra video.

Please see www.water-iq.co

The second bit of code did not work.

8

Opps, add overflow: hidden; underneath justify-content: center;

So it should look like this now:

.section-template--22181207114042__custom_liquid_WfiRJx-padding {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
9

Thank you! That is it!!

:goat: :goat: :goat:

1 Like