Search code examples
javascripthtmlcsscontainersposition

CSS Content Dısappearing on Zoom In

https://github.com/KaanAlper/Discord-Card On desktop browsers I can use it up to 125%, after that the content disappears. In phone nothing is visible directly

I tried deleting the container and leaving the content directly, but even then the background gets bigger and smaller, apart from the buttons. Frankly, I'm just learning this language. Sorry in advance.

Solution

  • The issue is this block of code in your css:

    @media screen and (max-width: 1470px) {
  .card-container {
    width: 1100px;
  }

  /* ↓↓↓ */
  .card:last-child {
    display: none;
  }
}

    I'm not sure what you are trying to do with the :last-child pseudo-selector, but because you only have one .card element, it is both the first and the last child, so it gets hidden on screens smaller than 1470px. Browsers will apply mobile styles based on the zoom percent. If you want to know why, this is a great answer.