Make video on home page smaller on mobile format.

[diydesigners]

I want to make this video show up smaller on mobile it is showing up to large and most of the content is getting cropped off.

https://tasselsandconfetti.com/

PW: rtiegh

[dmwwebartisan · Accepted solution]

@diydesigners 

Please add the following code at the bottom of your assets/theme.scss.liquid file. 

@media screen and (max-width: 800px){
.hero .featured-hero.size-x-large, .featured-hero.size-x-large {height: 200px !important;}
.hero-video .wrapper.loaded .ytplayer-player-inline {width: 100% !important;height: 100% !important;left: auto !important;}
}

Thanks!

[ShopKiHK]

@dmwwebartisan are you able to help me with the code for this one the icon theme? 🙂 post for reference: https://community.shopify.com/c/shopify-design/need-to-resize-background-video-for-mobile/td-p/16499...

[saber-alpha]

Hi. There is no Asset theme.scss.liquid file only theme.js.liquid.  Will this one work?

[saber-alpha]

Also this fix broke the other sections and they now no longer display it is just white screen where they are supposed to be displayed!