Responsive single price gird component using flexbox and grid

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted about 1 year ago

  Hi, @ForbiddenShadow. That's a good solution. Keep coding. Here are some important tips.

  1 - Don't use percentage units for your padding and margin values. This style creates many problems for future maintainers, and it's not legible. Use rem unit or clamp function instead of percentage.

  I think the clamp function will be the default unit for padding and margin in the near future, to make the websites more responsive. You can check this function here: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

  And you can create fluid units from here: https://utopia.fyi/

  2 - For more readable code, you can give your container four-sided padding values as consistently as possible:

  padding: 2rem 1.5rem;
  

  And you can give its children some space with margin-bottom like:

  .item1 {
  margim-bottom: 1rem;
  }
  .item2 {
  margim-bottom: 1rem;
  }
  .item3 {
  margim-bottom: 2rem;
  }
  

  3 - You can use unordered list ul and li tags for your .why-container part. These texts look like lists, so you can easily use ul and inside it li elements.

  I hope these will help you. Keep coding and have a wonderful day.

  Marked as helpful

  1

  ---

  

  AmeerMoustafa•120

  @AmeerMoustafaPosted about 1 year ago

  @adonmez04 I will try to keep these in mind and practice them. Your response was very helpful, thanks a ton.

  1