Video height issue on smaller laptop screens

Store Design
,

Topic summary

Main issue: In the Dawn theme’s standard Video section, the video appears too tall on smaller laptops, forcing users to scroll to view different parts. The homepage video is 4:3, base theme code hasn’t been modified, and prior base.css edits (suggested by ChatGPT) didn’t resolve it.

Key details:

  • Store: Brickle.co
  • Affected: Smaller laptop screens; 4:3 video on homepage
  • Request: Guidance to constrain video height without breaking layout

Proposed solutions (CSS-focused):

  1. Add a media query in base.css to cap video height (e.g., around max-height: 75vh) for certain screen widths, targeting the video section selectors.
  2. Add CSS in the Video section’s Custom CSS (or base.css) that:
    • Constrains height to viewport minus header (using CSS variables)
    • Preserves aspect ratio (aspect-ratio property)
    • Centers video (e.g., max-width ~82%, margin: 0 auto, padding: 0)
    • Uses a breakpoint around min-width: 750px.

Outcome/status:

  • No confirmation that the fixes worked; thread remains open.
  • Code snippets are central to the solutions; no images or attachments mentioned.
Summarized with AI on November 25. AI used: gpt-5.
1

Hello,
I am having some issues with the standard Video section of my store. On smaller laptops the video is ‘too tall’ and users have to scroll to be able to see different parts of the video.

  1. It is the standard video section of DAWN theme. I have not modified the code base.
  2. My store is: Brickle.co
  3. The video is 3/4 of the way down the homepage.

I have tried making edits to the asset ‘base.css’ as suggested by ChatGPT (!) but these have not solved the issue.

Any guidance appreciated.

2

Hello, @Brickle.co

Go to your base.css and try this code

@media screen and (max-width: 1440px) {
  .video-section .video-section__media {
    max-height: 75vh;
  }
}

Thank You!

4

This code can go into “Custom CSS” of video section.
This will limit height of the video to match height of the window/screen minus header height (and make video narrower to keep aspect ratio).

deferred-media.deferred-media {
  --height-constraint: max(var(--header-height,90px),90px);
  --aspect: calc(100% / var(--ratio-percent));

  margin: 0 auto;
  padding: 0 !important;
  aspect-ratio: var(--aspect);
  max-height: calc(100svh - var(--height-constraint) );
}

And you can undo this code you’ve adde to assets/base.css

@media screen and (min-width: 750px) {
  .video-section {
    max-width:82%;
    margin: 0 auto
  }
}