Dawn Theme - Video too small on mobile

Solved

Dawn Theme - Video too small on mobile

orchiworld
Excursionist
15 0 2

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. 

 

1 video desktop.png2 video mobile.png

Accepted Solution (1)
ProtoMan44
Shopify Partner
495 43 80

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;
 }
}
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

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; }
}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

orchiworld
Excursionist
15 0 2

Thank you very much. Where would I paste this code?

ProtoMan44
Shopify Partner
495 43 80

@orchiworld   hey, thanks for posting here.
 let me check

but I have a question .... why not use theme section for it?
, thanks.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
orchiworld
Excursionist
15 0 2

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. 

ProtoMan44
Shopify Partner
495 43 80

@orchiworld  ok, not a problem for now i have to write the code for you, hope it will helpful for you.

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

ProtoMan44
Shopify Partner
495 43 80

@orchiworld 
Please put this code in the custom CSS section.

ProtoMan44_0-1719289817755.png


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_1-1719290001591.pngProtoMan44_2-1719290021277.png

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
orchiworld
Excursionist
15 0 2

@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? 

ProtoMan44
Shopify Partner
495 43 80

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;
 }
}
- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
orchiworld
Excursionist
15 0 2

That's it! This worked wonders. 

Thank you, much appreciated.