Question

我正在尝试修复 https://flarum.it 上我的标题上的一个糟糕的错误它在桌面和安卓设备上运行良好，但在 iOs 设备上我有一个奇怪的问题，你可以在这里看到：

这是完整的 css 哦，我的标题

@media screen 
    and (width : 320px)
    and (width : 480px) {
  .slogan {
  font-family: 'Mukta', sans-serif;
  margin: auto;
  text-align: center;
  color: #2d3748;
  float: none;
    
  }
}

.line {
   width:100%;
   height: 7px;
   margin: 0;
   padding: 0;
   background-color:#fc6b03;
   position:absolute;
   top:0;
   left:0;
}
section {
    height: 290px;
    background-color: #F7F9F9;
}
div.logo{
margin: 0 auto;
width: 250px;
}
.logo {
    width: auto;
    height: auto;
    float: none;
    padding: 13px 0px 0px 0px; /*to make it exactly to the center*/
}
.slogan {
  font-family: 'Mukta', sans-serif;
  margin: auto;
  max-width: 430px;
  padding: 0px;
  text-align: center;
  color: #2d3748;
  padding: 0.1px 0px 0px 0px; /*to make it exactly to the center*/
  float: none;
}

#containerbtn {
  text-align: center;
}

.myButton {
    box-shadow:inset 0px 3px 0px 0px #e7752e;
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:10px 18px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color:#f6f6f6;
}
.myButton:active {
    position:relative;
    top:1px;
}

body {
    background: #F7F9F9;
}

我尝试使用 z-index，但我认为我的代码有问题（我不是专家）。你能帮我让这个标题在移动设备和桌面设备上都能使用吗？

编辑：HTML

<link href="https://fonts.googleapis.com/css2?family=Mukta:wght@200&display=swap" rel="stylesheet">
<header>
  <section>
  <div class="line">
    <div class="logo">
         <a href="https://flarum.it"><img src="https://flarum.it/assets/logo-ixhepxvy.png" alt="Flarum Italia" class="logo"/></a>
        </div>
    <div class="slogan"><h1>Flarum, il software per creare community in maniera divertente.</h1></div>   
    <div id="containerbtn">
    <button onclick="location.href='https://flarum.it/t/testa-flarum'" type="button" class="myButton" type="button" id="button1">Provalo ora!</button>
    <button onclick="location.href='https://docs.flarum.org/it/'"  class="myButton" type="button" id="button2">Documentazione</button>
</div>
 </section> 
</header>

标题响应所有桌面和移动设备

0 个答案: