Issue: A hero video added via Custom Liquid in Dawn autoplays but displays too large on desktop and too small on mobile. The requester wants desktop slightly smaller and mobile much bigger.
Initial suggestion: Add a mobile-only CSS rule to the video to increase height (e.g., height: 60vh under max-width: 749px). The requester asked where to place the code.
Refined approach: Another contributor recommended using the theme editor’s Custom CSS field. They provided CSS setting video { max-height: 600px; object-fit: cover; } with a mobile media query setting min-height: 100vh to improve mobile size.
Adjustment: After feedback to make mobile slightly smaller and desktop bigger, the CSS was updated to video { max-height: 7500px; object-fit: cover; } and @media (max-width: 749px) { video { min-height: 70vh; } } to fine-tune sizing.
Outcome: The final CSS met the requester’s needs and the issue was marked solved. Screenshots were shared to illustrate sizing and where to paste CSS, but the solution hinges on the provided CSS/media queries.
DAWN THEME
Added a video as a custom liquid (to make the video autoplay) at the top of my page.
I need help readjusting the size of the video both on desktop and mobile.
Website: www.orchi.com
Login: orchi-com
The video is too big on dekstop, and way to small on mobile.
I need a custom code to fix both issues.
Desktop: Slightly smaller.
Mobile: Way bigger.
Hi @orchiworld
You can add this code to the video section to make the video higher
@media (max-width: 749px) {
video { width: auto !important; height: 60vh !important; }
}
@orchiworld hey, thanks for posting here.
let me check
but I have a question … why not use theme section for it?
, thanks.
Thank you very much. Where would I paste this code?
Hi @ProtoMan44
Well, good question. I am no expert on this, so if there’s a better / easier solution for this then please feel free to let me know.
@orchiworld
Please put this code in the custom CSS section.
and put these code there.
video{
max-height: 600px;
object-fit: cover;
}
@media (max-width: 749px) {
video {
min-height: 100vh;
}
}
if it useful so please mark it as solved thanks.
@orchiworld ok, not a problem for now i have to write the code for you, hope it will helpful for you.
@ProtoMan44
This definetely worked! But I do need to readjust it a bit. I need to be slightly smaller on mobile and slightly bigger on desktop. Which settings should I adjust to fix this?
@orchiworld so replace old code with
video{
max-height: 7500px;
object-fit: cover;
}
@media (max-width: 749px) {
video {
min-height: 70vh;
}
}
That’s it! This worked wonders.
Thank you, much appreciated.