页脚不会随着@media use而动态变化

Question

我有一个基本的页脚，我的导航栏和标题都动态调整，到目前为止没有什么疯狂的，但我正在努力，但是当我尝试操作我的页脚时，我只是无法让它随着屏幕尺寸的变化而改变我做了什么。任何帮助。另请记住，我对此还很陌生，所以也欢迎任何建议

HTML：

<div class="Footer">
  <section>
    <div>
      <Section>
        <a>Contact Us</a>
        <br>
        <i class="fa-solid fa-location-dot"></i><a href="Google address remmoved for privacy"> text address</a>
        <br>
        <a href="google address removed for privacy"> Text address </a>
      </section>
      <br>
      <i class="fa-solid fa-phone"></i><a href="tel+> Phone number </a>
    </div>
  </section>
  <section>
    <div>
      <a>
        Hours:
        <br>
        Monday - Friday: 8am - 5pm
        <br>
        Saturday: 8am - 1pm
        <br>
        Sunday: Closed
      </a>
    </div>
  </section>
  <section>
    <div>
      Navigate
      <br>
      <a href="https://www.facebook.com/">Facebook</a>
      <br>
      <a href="https://www.instagram.com/">Instagram</a>
      <br>
      <a href="https://www.youtube.com/">Youtube</a>
      <br>
      <a href="https://www.linkedin.com/">LinkedIn</a>
      <br>
      <a href="https://www.pinterest.com/">Pinterest</a>
      <br>
      <a href="https://www.twitter.com/">Twitter</a>
    </div>
  </section>

</div>
</body>

</html>

CSS：

/*footer*/
.Footer {
    display: flex;
    justify-content: space-around;
    background-color: black;
    padding: 20px;
    flex-direction: row; flex-wrap: wrap;
  }
  
  .Footer > section {
    flex: 1;
    text-align: center;
    width: calc(33.33% - 20px);
    display: block;
    flex-wrap: wrap;
  }
  
  .Footer a {
    text-decoration: none;
    color: #FFFFFF;
    transition: color 0.7s ease;
  }
  
  .Footer i {
    margin-right: 5px;
    color: #977847;
    transition: color 0.7s ease;
  }
    .Footer i:hover{
    color: #FFFFFF;
    transition: 0.5 ease;
  }
  .Footer a:hover{
    color: #977847;
    transition: 0.5 ease;
  }

  @media screen and (max-width: 614px){
    .Footer{

        display: none;
    }
  }

我已经尝试了所有方法，包括将页脚的显示设置为无，这应该意味着当屏幕宽度低于 614px 时，它应该消失或至少其余的格式，即使这样也不起作用。 @media 在我网站的其他地方也工作得很好，是的，它的尺寸也不同，所以那里不应该有冲突。

Answer 1

您的代码中有语法错误；加号而不是结束引号。

<a href="tel+>