标题在移动设备上被截断，这导致 Logo 的顶部被截断。此网站出现此问题:http://development.blackcountrydesigns.co.uk
我正在为网站构建自定义主题。在浏览器工具中检查时不会出现此问题，只有在移动设备上实际查看时才会出现。在 iPhone 6 和 Sony Xperia XZ1 上测试。
这是我的 header.php 文件:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=0'>
<title><?php echo get_bloginfo('name'); ?> | <?php echo get_the_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class='bravo-logo'>
<?php if(function_exists('the_custom_logo') && has_custom_logo()) {
the_custom_logo();
} else { ?>
<a href='<?php get_bloginfo('wpurl'); ?>'><?php echo get_bloginfo('name'); ?></a>
<?php } ?>
</div>
<div class='bravo-main-menu bravo-menu'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
<div class='bravo-mobile-menu'>
<i class='fas fa-bars fa-2x' id='bravo-hamburger'></i>
</div>
</header>
<div class='bravo-vertical-nav'>
<?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
</div>
这是我的标题的所有相关 CSS - 请注意大约有 600 行 CSS，所以我刚刚删除了文件，只包含了与网站标题相关的 CSS:
/* Global/General Styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #4d4d4d;
font-family: 'Montserrat', sans-serif;
}
body {
padding-bottom: 270px;
position: relative;
min-height: 100vh;
}
/* Header */
header {
min-height: 150px;
display: flex;
align-items: center;
border-bottom: 3px solid #1abc9c;
background-color: #fff;
}
/* Logo */
div.bravo-logo {
padding: 1rem;
margin-left: 1.5rem;
}
div.bravo-logo img {
height: 100px;
width: auto;
}
@media only screen and (max-width: 450px) {
div.bravo-logo img {
width: 90%;
height: auto;
}
}
div.bravo-logo a {
text-decoration: none;
font-size: 1.5rem;
color: #4d4d4d;
}
/* Menus */
div.bravo-menu ul {
list-style-type: none;
}
div.bravo-menu ul li {
display: inline-block;
}
div.bravo-main-menu {
align-self: flex-end;
width: 100%;
margin-right: 3.5rem;
}
div.bravo-main-menu ul {
float: right;
}
div.bravo-main-menu ul li a {
display: block;
padding: .5rem .75rem;
text-decoration: none;
color: #4d4d4d;
font-size: 1.5rem;
font-weight: 200;
letter-spacing: .15rem;
transition: .3s;
}
div.bravo-main-menu li.current-menu-item a {
font-weight: bold;
}
div.bravo-main-menu ul li a:hover {
background-color: #1abc9c;
color: #fff;
}
div.bravo-mobile-menu {
display: none;
margin-right: 1.75rem;
}
div.bravo-mobile-menu i {
cursor: pointer;
}
div.bravo-vertical-nav {
display: none;
}
div.bravo-vertical-nav ul {
list-style-type: none;
}
div.bravo-vertical-nav ul li {
text-align: center;
cursor: pointer;
padding: .85rem 0;
background-color: #eee;
border-bottom: 2px solid #1abc9c;
}
div.bravo-vertical-nav ul li a {
text-decoration: none;
color: #1abc9c;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: .1rem;
}
@media only screen and (max-width: 1160px) {
header {
justify-content: space-between;
}
div.bravo-main-menu {
display: none;
}
div.bravo-mobile-menu {
display: block;
}
}
@media only screen and (max-width: 1070px) {
body {
padding-bottom: 570px;
}
header {
margin-top: -32px !important;
}
div#wpadminbar {
display: none !important;
}
}
@media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
我在两个断点上设置的负边距顶部是为了摆脱隐藏管理栏时留下的空间——我尝试过使用和不使用这些值，但似乎都没有什么不同。我已尝试调整页眉和 Logo 容器上的填充，但我正在努力，因为我似乎无法在我的桌面浏览器中复制错误。
请看下面的问题截图:
最佳答案
它是由 bravo.css?ver=0.0.1 引起的，第 483 行:
@media only screen and (max-width: 782px) {
header {
margin-top: -46px !important;
}
}
... 覆盖 456 行的规则集(同一文件):
@media only screen and (max-width: 1070px) {
header {
margin-top: -32px !important;
}
}
您可能想为 margin-top 设置不同的值。 -10px 看起来是个不错的选择。
关于css - 标题在移动设备上被切断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54390512/