Responsive four cards, first time using mobile-first approach

Community feedback

• 

  Vijay K Naik•940

  @KruzadeR-VictoRPosted about 2 years ago

  Hi Connor,

  i was checking out your solution and i noticed that it creates a horizontal scroll on larger screens beacuse of the fixed width of the body,instead you can set width to 100% or use max-width or overflow property to fix that.And for the colored borders you can use psuedo elements instead of classes.Other than that you've done a great job .

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Connor! 👋

  Congratulations on finishing this challenge! 🎉 It's great that you write the styling with the mobile-first approach. Also, you are using em unit for media queries which is the best unit for media queries.

  For your question, I think that the best approach is to use a separate class. So, what I would do is the following.

  .card {
    /* card base styling */
    border-top: 0.4rem solid var(--border-color, black);
  }
  
  .card--red-border {
    --boder-color: var(--red);
  }
  

  Note: The black color is the default border color for the card.

  I think this approach is a little bit better since for each modifier class, I only need to overwrite the custom property with the actual color.

  More suggestions:

  • Heading levels must always be in order to give structure to a page. h1 should always go first.
  • Also, the "reliable, efficient delivery powered by technology" should be wrapped with one heading element. It makes sense if it is read as one sentence.
  • Changing the html (or the :root) font-size can cause huge accessibility implications for those users with different font sizes or zoom requirements. I recommend taking a look at these resources to learn more about the issues.
    • A blog post by Josh Comeau where he writes about the problem of the 62.5% trick (and more!).
    • A comment from an accessibility expert (Grace Snow) about it.
  • Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.

  I hope this helps! Happy coding!

  0