我的网站中关于标题的奇怪的bug

Question

我已经发布了我的个人网站，但对于手机用户来说似乎有一个奇怪的bug。当我在我的PC上的“检查元素”中验证网站时。一切似乎都很好，但在我的iPhone上，情况就不同了。

“我用电脑做很酷的事情”这句话似乎把"s“去掉了，这很烦人。我尝试过除虫，但都不起作用。

另外，在底部的“联系我”部分，背景中的图片被无缘无故地放大了？

GitHub Full Code

My Website

What happens

Zoomed in background?

HTML：

<p class="line-1 anim-typewriter">hi, i'm mohanad</p>
<p class="line-2 anim-typewriter2">i do cool things with computers</p>

CSS：

.line-2{
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 25em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}

.anim-typewriter2{
 animation: typewriter2 2s steps(44) 1s 1 normal both,
     blinkTextCursor2 500ms steps(44) infinite normal;
     animation-delay: 3.5s;
 }
 @keyframes typewriter2 {
 from {
 width: 0;
 }

 to {
 width: 21em;
 }
 }
 @keyframes blinkTextCursor2 {
 from {
  border-right-color: rgba(255,255,255,.75);
  }
  to {
  border-right-color: transparent;
  }
 }

Answer 1

嗯，我想问题不在于“我用电脑做很酷的事情”这句话。您的HTML结构没有覆盖整个页面，这是由于以下样式造成的

.container {
    width: 90%;
    margin: auto;
    overflow: hidden;
}

将容器宽度更改为100%，以使其在响应视图之间工作。此外，将您的HTML更改为：

<header id="home">
          <nav class="">
             <div class="menu-icon lightSpeedIn animated">
                <i class="fa fa-bars fa-2x"></i>
              </div>
               <div class="logo fadeIn animated">MOHANAD ARAFE</div>
               <div class="menu lightSpeedIn animated" data-wow-delay="1s">
                    <ul>
                      <li><a href="#home">Home</a></li>
                      <li><a href="#portfolio">Portfolio</a></li>
                      <li><a href="#contact">Contact</a></li>
                    </ul>
              </div>
          </nav>
<div class="container">
          <p class="line-1 anim-typewriter">hi, i'm mohanad</p>
          <p class="line-2 anim-typewriter2">i do cool things with computers</p>
          <div class="readMore wow fadeIn" data-wow-delay="5.7s" style="visibility: visible; animation-delay: 5.7s; animation-name: fadeIn;">
            <a href="#aboutme"><h3>Read More</h3></a>
            <img src="./img/arrowDown.png" alt="Arrow Down">
          </div>
          <div class="location">griffith observatory, ca</div>
</div>
      </header>

请尝试这些更改，它可能会改变您的一些原始样式。我们可以在下一个版本中修复它们。

联系HTML：

    <section id="contact">
  <div class="container">
    <center>
    <h1>LET'S BUILD TOGETHER</h1>
    <p>If you need a website or any designs, feel free to contact me so we can design together! Also, if you see any bugs
      in the website, please let me know so I can fix it. Otherwise, if you just want to talk, shoot me an email!
      <form class="contact-form" action="contact.php" method="post">
        <input type="text" name="name" class="form-control" placeholder="Name" required><br>
        <input type="email" name="email" class="form-control" placeholder="Email" required><br>
        <input type="subject" name="subject" class="form-control" placeholder="Subject" required><br>
        <textarea name="message" class="form-control" rows="4" placeholder="Message" required></textarea><br>
        <button type="submit" name="submit" class="form-control submit">SEND MESSAGE</button>
      </form>
    </center>
  </div>
</section>

CSS：

#contact{
background: url('../img/contactBg.jpg');
background-size: cover;
background-attachment: fixed;
background-position:left;
padding-top: 20px;
padding-bottom: 20px;
}