Text dont dissappear with media query-CodePudding

I have this working before but now it doesn't work but I don't find the way to fix it.

My HTML code is here:

<div class="discordRectangle flex flex-center w-220 h-100 rounded-xl shadow">
     <div class="iconleft"><i class="fab fa-discord"></i></div>
    <div class="headerDiscord">
       <span class="small">CLICK TO JOIN OUR</span><br>
       <span class="big">OFFICIAL DISCORD &nbsp &nbsp</span>
   </div>
</div>

My CSS code is here:

@media(min-width:768px) {  
  .small {
    color: white;
    font-size :0px;
    font-family: 'Bowlby One', cursive;
  }
  
  .big {
    color: white;
    font-size: 0px;
    font-family: 'Bowlby One', cursive;
    white-space: nowrap;
  }
}

@media(min-width:1280px) {
  .small {
    color: white;
    font-size :12px;
    font-family: 'Bowlby One', cursive;
  }
  
  .big {
    color: white;
    font-size: 21px;
    font-family: 'Bowlby One', cursive;
    white-space: nowrap;
  }
}

I also tried with display: none; but it doesn't work anyways.

Any advice will be helpful, thanks beforehand.

CodePudding user response：

You could use visibility: hidden; which is an alternative to display: none; I also changed your min-width to max-width cause it sounds like you want it hidden below that screen size. I also changed your media queries to @media only screen and because the only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. The and is telling the browser at this maximum width I want this to happen to my elements.

@media only screen and (max-width:768px) {  
  .small {
    color: white;
    font-size :0px;
    font-family: 'Bowlby One', cursive;
    display: none;
  }
  
  .big {
    color: white;
    font-size: 0px;
    font-family: 'Bowlby One', cursive;
    white-space: nowrap;
    display: none;
  }
}

@media only screen and (max-width:1280px) {
  .small {
    color: white;
    font-size :12px;
    font-family: 'Bowlby One', cursive;
  }
  
  .big {
    color: white;
    font-size: 21px;
    font-family: 'Bowlby One', cursive;
    white-space: nowrap;
  }
}

<div class="discordRectangle flex flex-center w-220 h-100 rounded-xl shadow">
     <div class="iconleft"><i class="fab fa-discord"></i></div>
    <div class="headerDiscord">
       <span class="small">CLICK TO JOIN OUR</span><br>
       <span class="big">OFFICIAL DISCORD &nbsp; &nbsp;</span>
   </div>
</div>