Header-Video in Mobile View

[chrislueck]

Hi there at Okler,
I am using porto for chalet-foret.de. On our mainpage “chalet-foret.de/index.php”, we do have a video in the header. This video uses the complete space on a smartphone. The menu and logo ist not visible on start. The user has to scroll to see the menu and the logo.

What to change?
The client wants to have the menu/logo visible directly on start, so the video has reduced height. How can we change the following code aiming the target to initially see menu/logo on smartphone. The code-change should NOT change the display on desktop-browsers.

Here is our code:
<!– Header-Video+Overlay # Start –>
<section class=”section border-0 video overlay overlay-show overlay-op-3 m-0″ data-video-path=”video/chalet_foret_introvideo_1920″ data-plugin-video-background data-plugin-options=”{‘posterType’: ‘jpg’, ‘position’: ‘50% 50%’}” style=”height: 92vh;”>
<div class=”container position-relative z-index-3 h-100″>
<div class=”row align-items-center h-10″>
<div class=”col”>
<div class=”d-flex flex-column align-items-center justify-content-center h-100″>
<h1 class=”position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-4″>
<span class=”left-100pct top-50pct opacity-6″>
<div class=”w-auto appear-animation mt-2″ data-appear-animation=”fadeInDownShorter” data-appear-animation-duration=”4s” data-appear-animation-delay=”500″ data-plugin-options=”{‘minWindowWidth’: 0}” alt=”” />5-STERNE LUXUS</div>
</span>
<span class=”left-100pct top-50pct opacity-4″>

</span>
</h1>
</div>
</div>
</div>
</div>
</section>
<!– Header-Video+Overlay # End –>

Thanks for your help in advance.

Best regards
Christian

---

[Support]

Hi, you can reduce that height with css, limited to mobile, adding this:

(css/custom.css)

@media (max-width: 991px) {
	.main > section.video {
		max-height: 60vh !important;
	}
}

Kind Regards.

---

[Author]

Posts