Code to centre object on home page

Shopify Discussion

Topic summary

A Shopify user needed help centering a homepage video element that was aligning to the left instead of center.

Original Issue:

  • User had basic HTML/CSS code for an autoplay video but lacked proper alignment styling
  • The video appeared left-aligned when loaded on the homepage

Solution Provided:
Another user (ZestardTech) shared CSS code that:

  • Uses display: flex with justify-content: center and align-items: center on the container
  • Sets the video to width: 100% and height: 100vh for full viewport coverage
  • Includes max-width: 100% to prevent overflow issues

Outcome:
The solution worked perfectly for the original poster, who confirmed success and thanked the helper. The issue was resolved with the provided flexbox-based centering approach.

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

I’m very new to coding and have managed to find code to add a video to my homepage, however, I’m unsure what needs to be added to ensure it appears aligned in the centre of the screen, rather than the left once loaded. This is what I’ve got so far:

{% schema %}

{

“name”: “Homepage Video”,

“class”: “index-section index-section–flush”,

“settings”: ,

“presets”: [{

“name”: “Homepage Videos”,

“category”: “Text”

}]

}

{% endschema %}

{% stylesheet %}

.section-homepage-video

{ width:100%;

}

.video-homepage{

width: 100%;

height: auto;

}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

any help would eb greatly appreciated!

1 Like
2

Please provide store url?

3

Hi @thepaperdaisyco

You can try this code.


    

{% schema %}
{
    "name": "Homepage Video",
    "class": "index-section index-section--flush",
    "settings": [],
    "presets": [{
        "name": "Homepage Videos",
        "category": "Text"
    }]
}
{% endschema %}

{% stylesheet %}
.section-homepage-video {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* Makes sure it takes the full height of the viewport */
}

.video-homepage {
    width: 100%;
    height: auto;
    max-width: 100%; /* Ensures it doesn't overflow the container */
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
4

This worked perfectly! Thank you so much :hugs:

1 Like
5

Hi @thepaperdaisyco

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.