Responsive solution with basic flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great and it is responsive.

  kens_visuals already gave great tips on this one, just going to add some suggestions as well:

  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.
  • The text after the h1 could have just used p tag since the h1 is enough to describe the section.
  • When wrapping a text-content do not just use div, span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • aside is not really suited on this one. Normally, you would use aside when there are certain links, controls that are placed somewhat on side of the site.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @fvaldes0109 👋🏻

  I have a quick tip to help you position the item in the center of the body.

  • Add this snippet of code in body and you're good to go:

  body {
      background-color: hsl(204, 43%, 93%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  • Also, just to make your :hover state more complete, add cursor: pointer; to it.

  I hope this was helpful 👨🏻‍💻 other than that, you did a great job, keep it up. Cheers 👾

  Marked as helpful

  1
• 

  Fernando Valdés García•415

  @fvaldes0109Posted about 3 years ago

  Thanks! That's a really nice way of centering the card

  0