Custom liquid Fixed To Full Screen Regardless Of Display Size

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.

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!

Change this CSS code of in your custom code to this


1 Like

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; }