change height of vh100

[skmaler]

Need help on this page: feature-headers-semi-transparent-dark.html
Of the Port – Responsive HTML5 Template

I need to shorten the vh100 to about 97%. How would I go about that?
I tried changing some things in the css, but had no luck.
Any help would be much appreciated.

This is the code from the slider on the page I wish to shorten. It is used with a semi transparent navigation bar.
Objective is to have the call to action below the slider within the first view without scrolling.

<section class="section overlay overlay-show overlay-op-8 border-0 m-0" style="background-image: url(img/slides/slide-corporate-12-1.jpg); background-size: cover; background-position: center; height: 100vh;">
					<div class="container h-100">
						<div class="row align-items-center justify-content-center h-100">
							<div class="col-lg-6 pt-5">
								<div class="d-flex flex-column align-items-center justify-content-center text-center h-100">
									<h1 class="text-color-light font-weight-extra-bold text-12-5 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">WELCOME TO PORTO</h1>
									<p class="text-4-5 text-color-light font-weight-light opacity-7 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Trusted by over 40,000 satisfied users, Porto is a huge success in the one of largest world's MarketPlace.</p>
									<a href="#">GET STARTED NOW!</a>
								</div>
							</div>
						</div>
					</div>
				</section>

---

Template Version: latest version

[Support]

Hello, thanks for your purchase.

My suggestion is that you create a custom class for it, for example:

(css/custom.css)

.custom-height-1 {
    height: 97vh !important;
}

Then add that class “custom-height-1” to the element.

Kind Regards.

---

[Author]

Posts