Order Summary Component using plain HTML/CSS

Community feedback

• 

  Lee Holcomb•90

  @lholcombPosted almost 3 years ago

  Beautiful, well done! How did you get the card dimensions so accurate? I opened the design file in PS to get the height and width but my card was too small.

  0

  ---

  

  El-Sayed A. Naser•90

  @sayednaserPosted almost 3 years ago

  @lholcomb I appreciate that thanks :)

  I didn't see your solution so I don't know exactly the issue. I will share with you some tips and forgive me if the reply went too long :(.

  • The outermost margins look equal centering the card horizontally and vertically. flexbox container is good here, while sitting the min-height to 100vh.

  • The width of the card in desktop version is 450px and 327px in mobile-version. There are tons of approaches here that can get those widths right for those screen-sizes. They will differ for how you want to handle larger screen-sizes and the sizes between 375~1440px. For example, you can specify the card widths as constants and choose a proper breakpoint to switch between them. Another is to work in percentages.

  • We can notice that whole order-summary section has a left/right padding.

  • Finally, of course, to pay attention for the margins between vertical elements.

  There 2 tools I use to get near the exact measurements. I measure anything in Paint but PS is better of course :). The second tool is a browser-plugin "PerfectPixel", give it a look.

  0

  

  Lee Holcomb•90

  @lholcombPosted almost 3 years ago

  @sayednaser most helpful, thank you so much!

  0