Video section too large on desktop

Store Design
, ,

Topic summary

A user is trying to reduce the size of a video section in Shopify’s Dawn theme on desktop, while keeping the mobile scaling intact. They provided screenshots comparing their current oversized video section to a desired reference from another site.

Attempted Solution:

  • Another user provided custom CSS targeting the specific video element ID with fixed dimensions (800px × 450px) to be added to theme.liquid
  • The CSS includes media queries for desktop-only application and object-fit properties for proper scaling
  • The helper noted the existing code was “too messy” and offered further assistance via DM if needed

Current Status:

  • The proposed CSS solution did not resolve the issue
  • The problem remains unresolved and may require additional troubleshooting or a different approach
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello, Looking to reduce the size of the video section in dawn on desktop. Scale is perfect on mobile but too big on desktop. See screenshot here. Plus see a video section screenshot on ‘label source’ of how it should look. Thanks

label source
label source2938×1644 267 KB

my site
my site2932×1656 411 KB

2

@DASCPA
Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Thank you, the store is not currently live but see here URL: https://www.luxeraffles.co.uk/?_ab=0&_fd=0&_sc=1

password is: devtest25

4

Note: your code is too messy, I tried my best to reslove this problem.. If it will not work dm me for further detalis

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media (min-width: 1024px) {
    #Deferred-Poster-Modal-40367269478711 {
        width: 800px !important; 
        height: 450px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important; 
        overflow: hidden !important; 
    }

    #Deferred-Poster-Modal-40367269478711 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
        display: block !important;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

sorry this does not work