How can I reduce the size of my video cover image on desktop view?

Store Design
1

URL: https://60338a.myshopify.com/

Hi

I want to make the video cover image (that is on my home page) smaller.

How can I do it to apply only for this one but only in desktop view (size of img on mobile view is fine)

UL1_0-1700694836906.png
UL1_0-1700694836906.png1404Ɨ868 136 KB

2

Hi @UL1 ,

@media screen and (min-width: 1024px) {
  button#Deferred-Poster-Modal-44578738635088 {
    height: 500px;
  }
  button#Deferred-Poster-Modal-44578738635088 ~ video {
    height: 500px;
  }
  .video-section.isolate.section-template--19383194288464__545ded4d-ba88-4cad-af96-6718b6533931- padding {
    height: 700px;
  }
}

Insert this css snippet into your css file. Iā€™m setting the default height to 500px and 700px, you can adjust them to your liking.

Note: button#Deferred-Poster-Modal-44578738635088 and button**#Deferred-Poster-Modal-44578738635088 ~ video** height must be the same

Result:

![view - 2023-11-24T102131.021.png|1903x960](upload://vD9dcGKr1GbQtV8T1CFgPlsPZaw.jpeg)
3

Which css file? Cuz i copy paste it to base.css and it does not work.

4

Hey @UL1 ,

Can be custom.css or global.css file

You can try putting !important after the attributes

@media screen and (min-width: 1024px) {
  button#Deferred-Poster-Modal-44578738635088 {
    height: 500px !important;
  }
  button#Deferred-Poster-Modal-44578738635088 ~ video {
    height: 500px !important;
  }
  .video-section.isolate.section-template--19383194288464__545ded4d-ba88-4cad-af96-6718b6533931- padding {
    height: 700px !important;
  }
}

Hope it helps @UL1