Order Summary Component using HTML & CSS

Community feedback

• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted about 3 years ago

  1- Using indexing is not descriptive but it is a easy way to go about that but you also can use where it's used as unique identifier. For instance color-Background and color-background-header.

  2- Using any kind of relative unit gives you the fluditiy that you're looking for but try to not use the m whenever possible, setting no widths should be the ultimate goal.

  3- Well done, you could add some transitions to the links hover states to make a subtle UX improvment.

  Keep coding :=)

  Marked as helpful

  1
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Hanif,

  Great solution!

  Regarding scalable width's

  • you might want to opt for max-width instead of using fixed widths
  • have you considered using media queries with rem units to help with responsive design?
  • css unit best practice
  • a brief guide on responsive web design
  • here is an example of what I mean, changing the root font-size is where all the magic of rem takes place:

  
  html {
     font-size: 50%; //1rem = 8px
  
    @media only screen and (min-width: (max-width: 37.5em) { //600px
      font-size: 56.25%; //1rem = 9px
    }
  
    @media only screen and (min-width: 56.25em) { //900px
      font-size: 62.5%; //1rem = 10px
    }
  }
  

  Marked as helpful

  0

  ---

  

  Hanif Adams•150

  @omeizahanifPosted about 3 years ago

  @darryncodes Thank you. I use media queries all the time. My only issue has been setting up the appropriate technology (flexbox, min/max width, grid) that would allow my component scale up and down in a fluid fashion.

  I will keep practising and will give this code snippet a try. Thanks again!

  0