Skip to content Skip to sidebar Skip to footer

Contents Gets Overlapped In Mobile View In Html And Css

The code works correctly in desktop view but when I try to shrink the browser the over lap happens. I have provided the @media queries but still the contents overlaps with each oth

Solution 1:

You have written very lengthy code for a very simple thing, but sticking to your code, just replace your "visibility: collapse" with "display: none" and "visibility: visible" with "display: block", in your code. Your working CSS code is like this:

.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;
  }
  
}

Edit: - Also remove "margin-top: -50px and -100px" from your code.

Solution 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;
}
}
<divclass="navbar2"><divclass="container"><p><ahref="#section_products">Products</a><spanclass="the_line"> | </span><ahref="#section_products_services">Services</a><spanclass="the_line"> | </span><ahref="#section_about_nuts_main">About Nuts</a><spanclass="the_line"> | </span><ahref="#contact_us">Contact Us</a></p></div></div><!-- navbar2_for_mobile --><divclass="navbar2_for_mobile"><divclass="container"><p><ahref="#section_products">Products</a><spanclass="the_line"> | </span><ahref="#section_products_services">Services</a><spanclass="the_line"> | </span><ahref="#section_about_nuts_main">About Nuts</a><br><!-- <span class="the_line"> | </span> --><ahref="#contact_us">Contact Us</a></p></div></div><divclass="products"id="section_products"><pclass="our_products_are_nuts">Our Products Are Nuts <br>& Spice</p><pclass="nuts_expl">
        Call us to get Nuts and Spices at a best quality <br />
        and also at a best price
      </p></div>

Post a Comment for "Contents Gets Overlapped In Mobile View In Html And Css"