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"