Atom, html5, css, flexbox

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 4 years ago

  This looks great. Just some general improvements to suggest to fix these things:

  • At the moment at one point while resizing the viewport the cards go to different heights
  • At some screen sizes buttons are not vertically aligned with each other
  • Font sizes are in pixels, not rems, so cannot scale properly for users with different zoom/base font size settings
  • Content hits the side of the screen sometimes

  Here is what I just changed quickly in browser. Take a look through, apply things bit by bit in dev tools, resizing the viewport regularly, and you'll hopefully start to see the reasons behind each suggestion 🙂

  .card-container {
    /* align-items: center; */
    /* margin: 140px 0 100px; */ // don't use large margins for layout, especially in px
    /* font-size: 15px; */
    align-items: stretch;
    font-size: 0.9375rem; // font size always in rem / em!
    max-width: 48rem;  // other sizes in rem will allow them to scale too
    margin-bottom: 2rem;
  }
  
  // push buttons down to bottom - works in flex columns
  .card p {
    margin-bottom: auto;
  }
  
  // center content on page
  body {
    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 1rem; // stop content hitting sides of screen
  }
  
  

  11
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted about 4 years ago

  Hi there, Iryna! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

  I just suggest using anchor tags for the buttons in the card component since, well, they seem to lead somewhere! 😅

  Otherwise, your solution looks good and is responsive! 👍

  Keep coding (and happy coding, too)! 😁

  03
• 

  Rohit Purkait•460

  @codeswithroh

  Posted about 4 years ago

  You did an awesome work. But there are still some room for improvement regarding this solution like

  1. From the beginning of 970px the card-component sticks to the side of the screen

  The problem is caused by the margin in card-component class. You have assigned margin in three sides only. Just change it to "margin: 140px 100px" and that will solve your problem.

  01