Überschrift ansprechenden Portfolios nicht benimmt nicht richtig

Question

leider immer die Schlagzeile rutscht, wenn ich die Website auf kleinere Geräten öffnen oder die Browser-Fenster Größe ändern:

danieljwerner.com

Der betroffene Teil des Codes ist dies hier:

<div class="header-content"> 

<?php 

require_once 'Mobile_Detect.php'; 
$detect = new Mobile_Detect; 

if ($detect->isMobile()) { 

     echo '<div class="header-content-inner" style="margin-top:-17%;">'; 

} else { 

     echo '<div class="header-content-inner" style="margin-top:17%;">'; 

} 

?> 

<h1 id="homeHeading">What will shape the future?<br>Let's find out.</h1> 

Kann mir jemand einen Hinweis dazu geben? Ich verstehe nicht, warum der Browser aus dem Prozentsatz korrekt die Pixel nicht berechnet ... Vielen Dank für Ihre Unterstützung :)

Answer 1

Die Schlagzeile wegen der absoluten Position auf header .header-content gesetzt rutscht. Entfernen Sie auch die margin-top auf .header-content-inner

entfernen diese:

@media (min-width: 768px) 
header .header-content { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    padding: 0 50px; 
}