响应式投资组合的标题行为不正确

Question

不幸的是，如果我在较小的设备上打开网站或调整浏览器窗口的大小，标题总是会滑倒：

danieljwerner.com

代码的受影响部分在这里：

<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>

谁能给我一个提示？我不明白为什么浏览器不能正确地从百分比计算像素...... 感谢您的支持:)

Answer 1

标题因header .header-content 设置的绝对位置而滑动。另外，删除.header-content-inner上的margin-top

删除这个：

@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;
}