内容在 HTML 和 CSS 的移动视图中重叠答案

【问题标题】：Contents gets overlapped in mobile view in HTML and CSS内容在 HTML 和 CSS 的移动视图中重叠
【发布时间】：2021-02-21 06:28:19
【问题描述】：

代码在桌面视图中可以正常工作，但是当我尝试缩小浏览器时，会发生重叠。我已经提供了@media 查询，但内容仍然相互重叠，这是 codepen 链接https://codepen.io/gladwin-james/pen/jOVLZeO 缩小浏览器会发现差异

我也分享了下面的代码

HTML 和 CSS

.navbar2 {
  color: #fff;
  font-family: "Poppins" !important;
  text-align: center;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 5px;
}

.navbar2_for_mobile {
  visibility: collapse;
}

.products {
  background: #e1e1e2;
}

.our_products_are_nuts {
  margin-top: -50px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}
.nuts_expl {
  text-align: center;
  font-family: "Poppins";
}

@media screen and (max-width: 720px) {
  .navbar2 {
    visibility: collapse;
  }


  .navbar2_for_mobile {
    visibility: visible;
    margin-top: -100px;
    color: #fff;
    font-family: "Poppins" !important;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 5px;
  }

}

<div class="navbar2">
  <div class="container">
    <p>
      <a href="#section_products">Products</a>
      <span class="the_line"> | </span>
      <a href="#section_products_services">Services</a>
      <span class="the_line"> | </span>
      <a href="#section_about_nuts_main">About Nuts</a>
      <span class="the_line"> | </span>
      <a href="#contact_us">Contact Us</a>
    </p>
  </div>
</div>


<!-- navbar2_for_mobile -->

<div class="navbar2_for_mobile">
  <div class="container">
    <p>
      <a href="#section_products">Products</a>
      <span class="the_line"> | </span>
      <a href="#section_products_services">Services</a>
      <span class="the_line"> | </span>
      <a href="#section_about_nuts_main">About Nuts</a> <br>
      <!-- <span class="the_line"> | </span> -->
      <a href="#contact_us">Contact Us</a>
    </p>
  </div>
</div>

<div class="products" id="section_products">
  <p class="our_products_are_nuts">Our Products Are Nuts <br>& Spice</p>
  <p class="nuts_expl">
    Call us to get Nuts and Spices at a best quality <br />
    and also at a best price
  </p>
</div>

如果有解决方案，如果可以分享将非常有帮助。

【问题讨论】：

标签： html css

【解决方案1】：

您为一个非常简单的事情编写了非常长的代码，但坚持您的代码，只需替换您的 “可见性：崩溃”与“显示：无” 和在您的代码中，“可见性：可见”和“显示：块”。您的工作 CSS 代码如下所示：

.navbar2 {
  color: #fff;
  font-family: "Poppins" !important;
  text-align: center;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 5px;
}

.navbar2_for_mobile {
  display: none
}

.products {
  background: #e1e1e2;
}

.our_products_are_nuts {
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}
.nuts_expl {
  text-align: center;
  font-family: "Poppins";
}

@media screen and (max-width: 720px) {
  .navbar2 {
    display:none
  }


  .navbar2_for_mobile {
    display:block;
    color: #fff;
    font-family: "Poppins" !important;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  
}

编辑：- 同时从您的代码中删除“margin-top：-50px 和 -100px”。

【讨论】：

非常感谢您的回答，只是一个小小的澄清。那么，我该如何计划编写一个简单的代码，即添加更多代码行并使程序变得冗长。我是编程新手，任何想法都会很有帮助。
每个人都需要大量的练习才能写出不长的代码，所以要保持耐心，不断练习。如果您是网站开发新手，我建议您从 Bootstrap 开始。

【解决方案2】：

.navbar2 {
  color: #fff;
  font-family: "Poppins" !important;
  text-align: center;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 5px;
}

.navbar2_for_mobile {
  visibility: collapse;
}

.products {
  background: #e1e1e2;
  padding:10px;
  margin-top: -50px;
}

.our_products_are_nuts {
  
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}
.nuts_expl {
  text-align: center;
  font-family: "Poppins";
}

@media screen and (max-width: 760px) {
  .navbar2 {
    visibility: collapse;
  }


  .navbar2_for_mobile {
    visibility: visible;
    margin-top: -100px;
    color: #fff;
    font-family: "Poppins" !important;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 5px;
  }
 .products {
  margin-top: 0px;
}
}

<div class="navbar2">
      <div class="container">
        <p>
          <a href="#section_products">Products</a>
          <span class="the_line"> | </span>
          <a href="#section_products_services">Services</a>
          <span class="the_line"> | </span>
          <a href="#section_about_nuts_main">About Nuts</a>
          <span class="the_line"> | </span>
          <a href="#contact_us">Contact Us</a>
        </p>
      </div>
    </div>


    <!-- navbar2_for_mobile -->

    <div class="navbar2_for_mobile">
      <div class="container">
        <p>
          <a href="#section_products">Products</a>
          <span class="the_line"> | </span>
          <a href="#section_products_services">Services</a>
          <span class="the_line"> | </span>
          <a href="#section_about_nuts_main">About Nuts</a> <br>
          <!-- <span class="the_line"> | </span> -->
          <a href="#contact_us">Contact Us</a>
        </p>
      </div>
    </div>

<div class="products" id="section_products">
      <p class="our_products_are_nuts">Our Products Are Nuts <br>& Spice</p>
      <p class="nuts_expl">
        Call us to get Nuts and Spices at a best quality <br />
        and also at a best price
      </p>
    </div>

【讨论】：