I need help with adjusting the crop of a hero video

Store Design
, , , ,

Topic summary

A user is seeking help adjusting the crop ratio of a hero video on their Shopify store (theshadesofkco.com). The main issue is making the video display properly across different devices.

Proposed Solution:

  • Modify the aspect ratio using custom CSS by targeting the .t4s_ratio class
  • Set --t4s-aspect-ratio: 178% to match the video’s dimensions
  • Add a media query for desktop screens (min-width: 768px) to limit height with max-height: 88vh to prevent excessive vertical space

Key Consideration:
The video is portrait-oriented, which creates display challenges. The ideal solution would be using separate videos: portrait for mobile and landscape for desktop.

Status: The discussion remains open with one technical solution provided but not yet confirmed as implemented or resolved.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Can anyone help me adjust the crop ration of this hero video?

I’m having trouble making sense of the specific liquid.

I am working on this webpage:

https://theshadesofkco.com/

pw : SOKsummer225

1 Like
2

okay
let talk

3

I believe you can amend this in Section settings, but I do not have this theme to confirm.

Anyway, you should be able to do it using “Custom CSS” setting of this section (178% is your video aspect ratio):

.t4s_ratio {
  --t4s-aspect-ratio: 178%;
}

However, this will make your video too tall on desktop, because it’s a portrait video.

You may then add a rule like this to still crop the video to fit in window:

@media (min-width:768px) {
  .t4s_ratio {
    max-height: 88vh;
  }
}

Ideally you should have portrait video for mobile and landscape one for desktop…