display hidden doesn't work with media query-CodePudding

Even though I have added display:none or display:hidden, the container doesn't hide.

Code:

 <div className="button-container">
      <div className="cart-button" style={{ marginRight: "20px" }}>
        <p style={{ textAlign: "center" }}>Login</p>
      </div>
      <div className="cart-button">
        <p style={{ textAlign: "center" }}>Cart</p>
      </div>
    </div>

@media screen and (max-width: 480px) {
  .button-container {
    display: hidden;
  }
}

Codesandbox link: https://codesandbox.io/s/hardcore-platform-yzcz6m?file=/src/styles.css

CodePudding user response：

Setting display to none works. I checked it on your codesandbox fork.

@media screen and (max-width: 480px) {
  .button-container {
    display: none;
  }
}

CodePudding user response：

 <div className="button-container">
      <div className="cart-button" style={{ marginRight: "20px" }}>
        <p style={{ textAlign: "center" }}>Login</p>
      </div>
      <div className="cart-button">
        <p style={{ textAlign: "center" }}>Cart</p>
      </div>
    </div>

@media screen and (max-width: 480px) {
  .button-container {
    visability: hidden;
  }
}

CodePudding user response：

Try "visibility" instead of "display".

visibility: hidden;

CodePudding user response：

Try "none" instead of "hidden". with display

display:none