I am trying to create a header for my website, with my logo at the very left, and when the screen is too small, the logo disappears. I have searched all over Stack Overflow for half an hour and I haven't found a solution.

I am using a viewport. ==> <meta name="viewport" content="width=device-width, initial-scale=1">

I think I have the right code for @media screen too. ==>

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .one_image {
    display: none;
   }

}

My image is set up to the CSS correctly, so it's not that.

When I run the code, the image just disappears. Why?

Broken Code:

.menu-bar {
  background-color: #303030;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 10%;
}

.one_image {
  display: block;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  @media screen and (max-device-width: 1400px) and (min-device-width: 480px) {
    .one_image {
      display: none;
    }
  }
</style>
<div class="menu-bar">
  <a href="https://deltasoft.w3spaces.com/"><img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png"></a>


</div>

Code without @media screen:

.menu-bar {
  background-color: #303030;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 10%;
}

.one_image {
  display: block;
}

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="menu-bar">
  <a href="https://deltasoft.w3spaces.com/"><img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png"></a>


</div>

If anyone knows of any workarounds please let me know

Thanks in advance!

CodePudding user response：

Use min-width and max-width for media queries

CodePudding user response：

.menu-bar {
  background-color: #303030;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 10%;
}

.one_image {
  display: block;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  @media only screen and (max-width: 600px)  {
    .one_image {
      display: none;
    }
  }
</style>
<div class="menu-bar">
  <a href="https://deltasoft.w3spaces.com/"><img class="one_image" style="height:80%; margin-top:5px; margin-left:20px;" src="https://deltasoft.w3spaces.com/deltasoft_new.png"></a>


</div>

CodePudding user response：

Correct min-device-width and max-device-width to min-width and max-width. Then place the @media after the other styles.

.menu-bar {
  background-color: #303030;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 10%;
}

.one_image {
  display: block;
}

@media screen and (min-width: 480px) and (max-width: 1400px) {
    .one_image {
      display: none;
    }
}