1

my problem is i am trying to make a specific element disappear once a certain screen width is hit but no matter what i do it stays. i also tried to do simple media queries css such as changing background colour for specific widths but that doesnt work either.

Can someone suggest any solutions please? Thank you
This is my html code:

enter code here<!DOCTYPE HTML> 
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="technology blog"/>   
    <meta name="keywords" content="tech reviews,movie and tv reviews"/>
    <title>MNKTech</title>
    <link rel="stylesheet" href="main2.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">


</head>

<body>
  <div id="header-ad"></div>

   <div class="wrapper">
    <header id="mnheader">
     <nav>

       <div id="logo"><h1 id="branding"><a href="#">MNKTech</a></h1></div>  
       <div class="primary-nav">
          <ul> 
            <li class="menu" id="tech-menu"><a href="#"> Tech</a></li>
            <li class="menu" id=" howto-menu"><a href="#"> How To</a></li>   
          </ul>
        <a href="javascript:void(0)" class="close" 
onclick="closenav()">&times;</a>
       </div>    

         <span id="open" class="open" onclick="Opennav()">&#9776</span>
          <div class="social"> 
            <ul>
             <li class="facebook"><a href="#"><i class="fa fa-facebook" 
aria-hidden="true"></i></a></li>
             <li class="twitter"><a href="#"><i class="fa fa-twitter" aria-
hidden="true"></i></a></li>
             <li class="google"><a href="#"><i class="fa fa-google-plus" 
aria-hidden="true"></i></a></li>
             <li class="pinterest"><a href="#"><i class="fa fa-pinterest" 
aria-hidden="true"></i></a></li>
            </ul> 


        </div>


      </nav>
      <!footer>
      <div>
        </div>

















</body>



</html>

body{
margin: 0;
text-align:center;
}


h1{
color: white;
}


/* header
================*/ 
header{
background-color: dimgrey;
position: fixed;
width: 100%;

}
/*#header-ad{
min-height: 7vw;
}*/

header #branding{
float: left;

}
/* nav 
 =========*/
nav ul{
margin: 0;
padding: 0;
list-style: none;


}

.primary-nav ul {
 top: 50px;
 text-align: center;
 }

 nav li{
display: inline-block;
margin: auto;
margin-top: 26px;
float: left;
}

nav a{
color: white;
font-weight: 099;
text-decoration: none;
text-transform: uppercase;
font-family:sans-serif;
padding: 0.75em;
}

.social{
float: right;
margin-right: 50px;
font-size: 20px;
margin: auto;
margin-bottom:auto;
text-align: center;
}

.open{
float: right;
margin: 20px;
font-size: 30px;
color: white;
margin-top: 18px;
left: 50px;
display: block;
cursor: pointer;
}

.social ul{
margin-right: 50px;

}
.social ul li{
margin-top: 27px;
}

.cointainer{
width:95%;
margin: 0 auto;
}

@media screen and (min-width : 0px) and (max-width:650px) {

#open{
    display: hide;
}

}
zee
  • 11
  • 3

2 Answers2

0

If you want the item to "disappear" and have the space it occupies "disappear" too

@media screen and (min-width: 0px) and (max-width: 650px) {

    #open {
        display: none;
    }

}

If you want it to "dissapear but the space it occupies to be held

@media screen and (min-width: 0px) and (max-width: 650px) {

    #open {
        visibility: hidden ;
    }

}

A better explanation would be that display: none you are "deleting" the element entirely whereas visibility: hidden just makes it "invisible" but it is still occupying that space. For more info see here.

yohohosilver
  • 367
  • 1
  • 2
  • 15
0

You can use below CSS

@media screen and (max-width:650px) {
#open{
    display: hide;
}
}
bellabelle
  • 908
  • 7
  • 13