Make video on home page smaller on mobile format

Store Design
1

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

Screenshot (11).png
Screenshot (11).png2527×1439 347 KB

1 Like
2

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

3

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

4

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

5

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!