Search code examples
cssmedia-queries

display hidden doesn't work with media query

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

Solution

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

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