Question 295958 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    In the styles.css file you have:

    /* Media Queries */
@media screen and (max-width: 1470px) {
   .card-container {
    width: 1100px;
  }
   .card:last-child {
    display: none;
  }
}

    By enlarging the page using zoom, the browser’s viewport remains the same, but it begins to respond to break points in slightly different places, depending on how much you zoom in or out. This code:

    .card:last-child {
 display: none;
}

    makes it disappear unexpectedly because you accidentally trigger this breakpoint by zoom in.

    Regards!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search