Orden Summary Component

Community feedback

• 

  P

  FO•205

  @de-furkan

  Posted over 2 years ago

  Great attempt at this project 🎉

  I can see you have made effort to include CSS variables which is always nice to see :)

  here are some improvements that can be made:

  • avoid setting height with vh on body to make the page full screen. This can be problematic on phones and smaller screens, especially when the project gets more complex.

    • one way to get around this issue is:

  html,
  body{
    height: 100%;
  }
  
  main{
    min-height: 100%;
  } 
  

  • don't litter the HTML document with <div>, instead make use of HTML5 semantic markups e.g. <section> or <article> for the card component

  • supply a padding top on the body element so that it doesn't cause any alignment problems or clip out your card when the phone is in landscape mode.

    • you could alternatively, supply a margin top to the card to achieve a similar effect

  • make use of rems for border-radius. On some screens the border-radius can cause un-intended side effects when you declare them with pixels

  • use some reset properties for CSS e.g. you could display <img> as:

  img{
    display: block;
    max-width: 100%;
  

  I hope these help. Happy coding :)

  01

  Marked as helpful