Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
@orchiworld so replace old code with
video{
max-height: 7500px;
object-fit: cover;
}
@media (max-width: 749px) {
video {
min-height: 70vh;
}
}
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; }
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you very much. Where would I paste this code?
@orchiworld hey, thanks for posting here.
let me check
but I have a question .... why not use theme section for it?
, thanks.
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 ok, not a problem for now i have to write the code for you, hope it will helpful for you.
@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.
@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?
This is an accepted solution.
@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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025