Used flexbox to center the card. Border-radius to add rounded corners

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted 3 months ago

  Hi, good job! The centering of the card is spot on :)

  Here are some suggestions I hope you find helpful:

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would remove .card on main and wrap the card content in a <div class="card"> inside of <main>.

  • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

  CSS:

  • Make a habit of including a modern CSS Reset at the top of your stylesheet. At least include the following snippet:

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  

  MDN has good articles about the CSS Box Model and the box-sizing property.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove all widths and heights in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

  • We do want to limit the width of the card so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

  • font-size must never be in px. This is a significant accessibility issue, as it prevents the font size from scaling with the user's default browser setting. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • On the image, add height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  20

  Marked as helpful
• Account deletedPosted 3 months ago

  Great solution, well done!

  rem is generally better for responsive layouts, especially for controlling font sizes, margins, paddings, and widths. It scales consistently based on the root font size, making your layout more predictable.

  Another quick take: Avoid fixed heights unless you really need them they can make components overflow or behave unpredictably on smaller screens.

  20

  Marked as helpful