Trying to make video height smaller on desktop only - DAWN theme

[andrew72]

Hello there,

I am trying to make the height of this video smaller for desktop and remain the same for mobile.

This page: https://obadiahcoffee.com/pages/holiday-shop

Thank you.

[steve_michael2]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

#video#video-template--16291418767514__full_width_video_LC6QtU{
	width: 100%;
	height: 70vh;
	object-fit: cover;
}

Thanks!

[andrew72]

Hello @steve_michael2 

Thanks, do you know how to make this only affect desktop and not mobile?

[steve_michael2]

Use it, instead of this code

@media (min-width: 769px){
#video#video-template--16291418767514__full_width_video_LC6QtU{
	width: 100%;
	height: 70vh;
	object-fit: cover;
}
}

 Thanks!

[andrew72]

That isn't working for me sorry.

[andrew72]

Do you have code for the Custom CSS on the page, to effect desktop only? @steve_michael2 

[steve_michael2]

Hi, @andrew72 

Try this one

@media (min-width: 769px){
#video#video-template--16291418767514__full_width_video_LC6QtU{
	width: 100% !important;
	height: 70vh !important;
	object-fit: cover !important;
}
}