Skip to content
Submitted about 1 month ago

Blog preview card

Wawowah•430
@wawawoh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

media previews

What specific areas of your project would you like help with?

any feedback is helpful

Please log in to post a comment

Log in with GitHub

Community feedback

  • Frontend-dev•40
    @frontend-devv

    Use the clamp() function to avoid media queries. Set min-height: 100vh for body to center the container along cross axis. Use rem instead of px for better scalability and consistency across devices.

    Happy coding!

    Marked as helpful
  • P
    mpujazon•160
    @mpujazon

    Hello @wawawoh! I can see that the card is not centered on the screen. You are using Flex, but it is not centering the card. To fix this, you need to specify the height of the container that holds the card—in this case, the body. The following code will display it correctly:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ensures full height of the viewport */
  width: 100vw; /* Ensures full width of the viewport */
  margin: 0; /* Removes default margin */
}

    Kind regards.

  • dangduomg•40
    @dangduomg

    try to center the card vertically with margin: auto; and give it less padding otherwise its good

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord