Blog preview card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 4 months ago

  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.

  Marked as helpful

  1

  ---

  

  olgaEK•20

  @OlgaElKhayatPosted 4 months ago

  @beowulf1958 "Thank you so much! I followed your advice, and it worked. I initially considered using a flexbox but only applied it to the blog card, not realizing that it could also be used for the entire body. Thanks for taking the time to explain everything so clearly. Your help is much appreciated!

  0
• 

  Danilo Alves 🎧•535

  @mizek1Posted 4 months ago

  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.

  Marked as helpful

  1

  ---

  

  olgaEK•20

  @OlgaElKhayatPosted 4 months ago

  @mizek1 Thank you so much! I've finished all 24 levels of the game, and now I feel like I understand Flexbox so much better. I really appreciate you taking the time to answer my question!

  0