Odtnhj

I've been pulling my hair out trying to make the load in for this responsive as well as look right no matter the screen size.. I've uploaded the site to a random domain I had:

Test Domain

My main problem is that the logo has to be an image rather than actual text and I need the line to be dead centre of the image the whole time regardless of the screen size which then tends to go off centre when the height gets smaller. I tried adding media queries to the line for different screen sizes but it doesn't really work

Edit: Putting code in post as well

HTML:

<!-- Carousel -->

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4200" data-pause="false">
 <div class="carousel-inner">
 <div class="carousel-item black-fade">
 <img class="d-block w-100 slide-fade" src="/Images/slide-imagery/Warendorf16_02.jpg" alt="First slide">

 </div>
 <div class="carousel-item">
 <img class="d-block w-100" src="/Images/slide-imagery/AL40028200.jpg" alt="Second slide">
 </div>
 <div class="carousel-item">
 <img class="d-block w-100" src="/Images/slide-imagery/FUSION-230-x-180-H-67a.jpg" alt="Third slide">
 </div>
 <div class="carousel-item">
 <img class="d-block w-100" src="/Images/slide-imagery/mosaic_anniversary_oro_doppia.jpg" alt="Fourth slide">
 </div>
 </div>
</div>
<div class="title-container">
 <span class="title-underline"></span>
 <h1 class="test2 load-delay"><img src="/Images/Brooklands-Interiors-logo-noBG-noLine.svg" width="500px" class="BI-loadin"></h1>

 </div>
 <p class="title-intro">Showroom now open on Oyster Lane, Brooklands</p>
<div class="arrow-down"><a href="#pull-down"><img src="/Images/arrow-dow.svg" width="40px" class="arrow-bounce"></a></div>

CSS:

 /* Title load in styling */

.title-container 
 position: absolute;
 width: 50%;
 height: 100%;
 text-align: center;
 vertical-align: middle;
 top: 50%;
 display: inline-block;
 left: 50%;
 transform: translate(-50%, -50%);


.test2 
 opacity: 0;
 animation: example2 4s linear;
 z-index: 1000;
 padding-top: 42vh;
 

 @keyframes example2 
 0% padding-top: 47vh;
 7% padding-top: 42vh; opacity: 1;
 85% padding-top: 42vh; opacity: 1;
 100% opacity:0;
 


 .title-underline 
 background-color: white;
 height: 8px;
 width: 500px;
 display: block;
 position: absolute;
 transform: scaleX(0); 
 animation: example3 3s linear;
 animation-delay: 1.8s;
 z-index: 200;
 margin-top: 48vh;
 left: 50%;
 margin-left: -250px;
 

 .title-underline:after 
 padding-bottom: 200px;
 

@keyframes example3 
 0% transform: scaleX(0);
 10% transform: scaleX(1);
 11% transform: scaleX(1.05);
 12% transform: scaleX(1.035);
 13% transform: scaleX(1.025);
 14% transform: scaleX(1.01);
 85% transform:scaleX(1); opacity: 1;
 100% opacity: 0; transform:scaleX(1);
 

 .title-intro 
 opacity: 0;
 color: white;
 font-weight: 500;
 animation: subtitlefade 4.1s ease-in-out;
 font-size: 1.8rem;
 top: 50%;
 position: absolute;
 left: 50%;
 transform: translate(-50%, -50%);
 animation-delay: 5100ms;
 letter-spacing: .1rem;
 text-align: center;
 

 @keyframes subtitlefade 
 20% opacity: 0;
 30% opacity: 1;
 95% opacity: 1;
 100% opacity:0;
 

 @keyframes delayedfade 
 100% opacity: 1;
 

 .load-delay 
 animation-delay: 1000ms;