How can I resize the homepage video on Dawn theme?

Store Design
, , ,

Topic summary

Main issue: Resize the homepage video on the Dawn theme for desktop; requester also wants the original base.css in case prior edits caused issues.

Latest guidance:

  • A link to the Dawn theme demo base.css was provided to restore the original stylesheet.
  • Solution 1 (CSS, desktop only): Add a media query in base.css for screens ≥768px targeting .video-section__media.global-media-settings–full-width with padding-bottom: 30% to reduce the video’s displayed height.
  • Solution 2 (CSS, general steps): In Online Store → Edit Code → base.css, add rules to set the video element’s position: absolute; width: 100%; height: 450px.

Key concepts:

  • base.css: the theme’s main stylesheet where custom CSS edits are made.
  • Media query: CSS rule that applies styles based on screen size, allowing desktop-specific adjustments.
  • CSS selectors: target specific elements/classes in the video section to control size.

Status and outcomes:

  • Multiple code snippets were proposed; restoring original base.css is possible via the provided link.
  • No confirmation from the requester; resolution remains open.
  • Code snippets are central to understanding and implementation.
Summarized with AI on January 7. AI used: gpt-5.
1

Hi there, I’ve been trying to make my video on my homepage slightly smaller for desktop as it’s too big, here’s my website: www.cleanthings.co

I’ve tried the different solutions on here, replacing the code and none of them have worked. Would someone be able to help me with this/also give me the original base.css code incase I have accidentally ruined the original code by trying to change it somehow.

Thanks!

2

Hello @halfsesh ,

Open this URL to get the base.css of Dawn themem
https://theme-dawn-demo.myshopify.com/cdn/shop/t/44/assets/base.css?v=117828829876360325261686237166

To make the video size smaller on desktop ad this css at the bottom of bae.css

@media screen and (min-width: 768px) {
.video-section__media.global-media-settings--full-width {
    padding-bottom: 30% !important;
}
}
1 Like
3

Hi Halfsesh,

Follow these steps :

  1. Go to Online Store

  2. Edit Code

  3. Find base.css file

  4. And put this code in the botom

section__media video {
    position: absolute;
    width: 100%;
    height: 450px