Reduce the size of the video cover image on my home page in Dawn Theme.

[arcticwave]

I cannot figure out how to get the cover image of my video to be smaller on my home page via desktop. I have Dawn 15.0.0. This is a screen shot of all I can see since it's so large. I've tried different codes based on other similar questions but I can't get anything to work. Can you advise on how to reduce the size of this cover image? Thanks for any help you can offer!

[arcticwave · Accepted solution]

That worked! Thanks so much for all of your help on this.

[BSS-TekLabs]

Hello @arcticwave .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[arcticwave]

www.arcticwaveco.com

[BSS-TekLabs]

- Here is the solution for you @arcticwave 
- Please follow these steps:

 

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media only screen and (min-width: 600px) {
.media>*:not(.zoom):not(.deferred-media__poster-button) {
 height: auto !important;
    width: auto !important;
}
}
@media (prefers-reduced-motion: no-preference) {
    .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
        justify-content: center !important;
        display: flex !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[arcticwave]

Awesome, that worked! Thanks! How do I get it centered now?

[arcticwave]

I noticed the play button isn't in the center of the image now either.

 

[BSS-TekLabs]

Can you add more code @arcticwave 

@media only screen and (min-width: 600px) {
.video-section__poster.deferred-media__poster {
     justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
.media>*:not(.zoom):not(.deferred-media__poster-button) {
        position: relative !important;
    }
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @arcticwave . 

[arcticwave]

Actually, that messed with most of the sections on my website. I erased that code and everything went back to normal again but I still have a huge cover image for the video. 

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
.video-section .video-section__poster.deferred-media__poster {
     justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
.video-section .media>*:not(.zoom):not(.deferred-media__poster-button) {
        position: relative !important;
 height: auto !important;
    width: auto !important;
    }
}

Could you please re-add this code so I can test it ?  @arcticwave 

[arcticwave]

Done. I changed the top and bottom padding to zero and there's still a big white space above and below the cover image, but everything else looks perfect.

[BSS-TekLabs]

Can you try this code @arcticwave 

@media only screen and (min-width: 600px) {
.video-section .video-section__poster.deferred-media__poster {
     justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}
.video-section .media>*:not(.zoom):not(.deferred-media__poster-button) {
        position: relative !important;
 height: 1000px !important;
    width: 800px !important;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
            border: none !important;
    }
}

[arcticwave]

I'm still seeing a big gap. Can you check on your end for me?

[BSS-TekLabs]

Can you add more code @arcticwave 

.video-section__media {
    --ratio-percent: 100% !important;
}

[arcticwave · Accepted solution]

That worked! Thanks so much for all of your help on this.

[BSS-TekLabs · Accepted solution]

Glad to help you. Have a good day.

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.