[Resolved] Space after page header

[Regina]

Hithere,

actually I already opened e ticket, but something went wrong. So I try it again:

The page header of the front page has a height of 407 px, but should be only 400 px like the other pages. There is a space of 7 pixel after, which I do not understand. I have one header element for all pages and different hook elements with sliders. In the front page hook is a video inside:

<div class="grid-container">
<div class="video-logo">
    <img src="https://waescherei-dobrovsky.de/wp-content/uploads/2020/02/Logo-Dobrovsky-line.png" alt="Wäscherei Dobrovsky">
	</div>	
<video loop muted autoplay poster="https://waescherei-dobrovsky.de/wp-content/uploads/video/videoposter.jpg">
    <source src="https://waescherei-dobrovsky.de/wp-content/uploads/video/wasser.mp4" type="video/mp4">
	</video>
</div>

.grid-container {
position: relative;
padding: 0;
}
.video-logo {
position: absolute;
padding: 20px;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
max-height: 400px;
z-index: 0;
}

How can I close the space of this 7 pixels?

Thank you in anticipation!

[David]

Hi there,

include the vertical-align: bottom; property in this CSS:

video[poster] {
    object-fit: cover;
    width: 100%;
    max-height: 400px;
    z-index: 0;

    /* Add the following property */
    vertical-align: bottom;
}

[Regina]

Perfect!
Thank you so much, David!

[David]

You’re welcome

[Author]

Posts