Dawn Theme Replace Video Background with Image on Mobile

Store Design
1

Hello! I have successfully created a video background at 100% height for our home page. It looks great, but it does not scale well on mobile. I would like to replace the video background with a static image, but for mobile only. Any help is greatly appreciated!

https://alanryan.dev/tips/video-background-dawn-theme/

PS. Another option, would be to scale the video to not 100% height on mobile only to keep its appearance correct. Unsure how to do this as well.

2

Hi @wolf3142 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
	.hero .video-bg {
		width: 100%;
	}
}

Hope it helps!