Built with CSS flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Betelhem, congratulations for your new solution!

  You've missed the color for the background, in this case is background-color: #F2F2F2 and add it to the body.

  Add min-height: 100vh instead of min-height: 800px to have the proper alignment and make the body have the size of 100% of the vviewport height size:

  main {
      font-family: var(--font-family-lexend), sans-serif;
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size);
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Betelhem,

  Congratulation on completing another frontend mentor. I have some suggestions regarding your solution:

  • About <h1>it is recommended not to have more than one h1 on the page. Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then you can swap those <h1> with <h2>

  • In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • Add border-radius andoverflow hiddento the main container that wraps the three cards so you don't have to set border-radius to individual corners.

  Hopefully this feedback helps.

  Marked as helpful

  1