Android 网站徽标与网站标题重叠
我想从网站标题分离的网站标志 当我用手机正常打开时网站标题和徽标重叠强> header.html页面如下所示Android 网站徽标与网站标题重叠,android,html,css,Android,Html,Css,我想从网站标题分离的网站标志 当我用手机正常打开时网站标题和徽标重叠 header.html页面如下所示 <!-- header ================================================== --> <header class="short-header"> <div class="gradient-block"></div> <div class
<!-- header
================================================== -->
<header class="short-header">
<div class="gradient-block"></div>
<div class="row header-content">
<h1 align="center"> BRCB- Biology Resources for Curious Biologists</h1>
<div class="logo">
<a href="index.html">Author</a>
</div>
Q1.我希望对BRCB使用大字体,对好奇的生物学家使用小字体作为生物资源
Q2。徽标不应与文本重叠请创建一个最小的可重现示例。i、 e.除去最基本的组件以外的所有组件,并在可加载的代码片段中重新创建问题。给出你的全部代码并期望人们全部阅读是不明智的,而且在这个社区中很容易被人看不起,这可能会让你获得大量的反对票。试着创建一个。看见
/* ===================================================================
* 09. header styles - (_layout.scss)
*
* ------------------------------------------------------------------- */
header {
width: 100%;
background: #DBDBDB url(../images/escheresque_@2X.png) repeat;
background-size: 46px 29px;
height: 130px;
border-bottom: 1px solid #E5E5E5;
}
header .header-content {
height: auto;
max-width: 1290px;
position: relative;
top: 24px;
left: 0;
right: 0;
width: 100%;
}
header a {
border: none;
}
@media only screen and (max-width:400px) {
header {
height: 118px;
}
}
/* -------------------------------------------------------------------
* header logo - (_layout.css)
* ------------------------------------------------------------------- */
header .logo {
position: absolute;
left: 35px;
top: 6px;
z-index: 601;
}
header .logo a {
display: block;
margin: 0;
padding: 0;
outline: 0;
border: none;
width: 60px;
height: 60px;
background: url("../images/logo.png") no-repeat center;
background-size: 60px 60px;
font: 0/0 a;
text-shadow: none;
color: transparent;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* responsive:
* header logo
* ------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
header .logo {
left: 45px;
}
}
@media only screen and (max-width:600px) {
header .logo {
left: 35px;
}
}
@media only screen and (max-width:400px) {
header .logo {
left: 25px;
}
header .logo a {
width: 54px;
height: 54px;
background-size: 54px 54px;
}
}
/* -------------------------------------------------------------------
* navigation - (_layout.css)
* ------------------------------------------------------------------- */
.triggers {
position: absolute;
right: 35px;
top: 18px;
}
.triggers .search-trigger {
display: inline-block;
font-size: 17px;
color: #000000;
}
.triggers .menu-toggle {
display: none;
}
/* responsive:
* triggers
* ------------------------------------------------------------------- */
@media only screen and (max-width:768px) {
.triggers {
right: 40px;
top: 12px;
}
}
@media only screen and (max-width:600px) {
.triggers {
right: 30px;
}
}
@media only screen and (max-width:400px) {
.triggers {
right: 20px;
}
}