January 7, 2021 at 11:18 pm
#10035603
Keymaster
Hello Alexander,
Please try changing the HTML of section to:
<section class="custom-section-style-1 section border-0 mt-0 mb-0 pb-0 py-0" style="background-image: url(img/femina/Homepage-Main-Image-2-Wide-Zoomed-x125-up.png); background-size: cover; background-position: center;"> <div class="container h-100"> <div class="row align-items-center justify-content-center h-100"> <div class="col-lg-12"> <h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInDown" data-appear-animation-duration="950"><em>- Individually -</em></h2> <h1 class="text-center text-color-light-custom-2 font-weight-bold text-sm-5 text-md-8 text-lg-9 text-xl-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Tailored Assistance</h1> <h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1700" data-appear-animation-duration="950"><em>suiting your needs</em></h2> </div> </div> </div> </section>
* Note I removed some spacement classes and added h-100 to always center the content.
Also should be a good idea add this new custom CSS for small screens:
@media(max-width: 575px) {
.custom-section-style-1 {
height: 100vw;
}
}
* Note you can change these custom CSS height values to fit with your background.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads