Blog preview card

Congratulations on completing this challenge! I love the hover effects and the smooth transition.

The reason your card becomes hidden when resizing the screen is that you hard coded the margin-top and margin-left. This is not a good way to position your card. It would be better to use one of the centering techniques from this website Then the card stays visible (and centered) when resizing.

Remove the margin-top an margin-left from .preview-card Then add this to the body

      body {
        background-color: hsl(47, 88%, 63%);
        font-size: 16px;
        font-family: "Figtree", sans-serif;
        letter-spacing: 0px;
        /* add */

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
      }

Now everything works fine.

Hi Olga! I recommend that you study a little about positioning, especially flexbox. The problem you described occurs because you used fixed margins to position the element on the screen. So, when the screen decreases in height or width, the element continues with the positioning you defined. Flexbox rules will help you position the element and ensure that the element adjusts to the width and height in a better way. I have a fun way for you to learn flexbox, that is https://flexboxfroggy.com/, is a game where you can see and learn how flexbox works and will help you a lot.