Custom liquid Fixed To Full Screen Regardless Of Display Size

Store Design
,

Topic summary

A user is attempting to make a video in a custom liquid section display full-screen across all device sizes but encountered issues with their initial implementation.

Problem:

  • Video not scaling properly to full screen regardless of display dimensions
  • Multiple attempted solutions failed initially

Solution provided:

  • Another user suggested modifying CSS code in the custom markup
  • The original poster combined this CSS suggestion with additional code added to theme.liquid
  • Specifically added styling targeting a section template class with height: 110vh and padding properties

Outcome:

  • The combined approach successfully resolved the issue
  • Video now displays full-screen as intended across different display sizes
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I’ve added a short video in a custom liquid and I want it to be a fixed to full screen regardless of display size. I’ve tried multiple ways, but nothing seems to work. Can anyone help me with please?

Thanks is advance!

2

Change this CSS code of in your custom code to this
1 Like
3

Thank you for a prompt reply!

That partially sorted my problem! In addition to this, I’ve added a code below in theme.liquid and now it’s working perfectly.

.section-template--20372803191121__e2c2ec83-11b8-4fea-92a8-d54e49789879-padding { height: 110vh; }