Ordinary Order Summary Component solution

Community feedback

• 

  Daniel Samuel•40

  @DeCaptainDanPosted about 3 years ago

  How did you make sure that it looks exactly like the required design?

  1

  ---

  

  Robert K•80

  @RobertK0Posted about 3 years ago

  @DeCaptainDan Lots of trial and error. Played around with different properties until it look the way I wanted it to. Different widths, margins, paddings, percentages, lots of flex boxes. Played around with max-width and a lot of other different stuff you can see in the source code, until it got to looking good. And it took a loooot of googling and learning. The whole order summary tab here is just a div flexbox — centered horizontally and vertically — and then just width, and the height (individual element paddings and margins) adjusted until the live site preview looked as close as possible to the available desktop-design.jpg.

  0
• 

  Daniel Samuel•40

  @DeCaptainDanPosted about 3 years ago

  wow... that sounds great. Can you share your knowledge on the use of percentages and the flex-box? Thanks for your reply

  0

  ---

  

  Robert K•80

  @RobertK0Posted about 3 years ago

  @DeCaptainDan I'm learning as well, so I don't know much yet, but I've pretty much found everything I know through googling and looking through documentation.

  Here's a link to some documentation I've found useful. Using that I just play around in chrome dev tools, and modify properties (e.g. width) with random values, and just see what works best for me.

  Maybe a fixed 100px width looks odd in mobile view? Let's try 90% (which means 90% of parent element width). Oh now it looks too big when in normal mode? Time to google "how to set maximum width for a css element". Find out about max-width. Add a max-width and set it to 100px. Aaand perfect.

  Just takes a little playing around with to figure it out, can't break it in any case, just undo it if you do. This pretty much sums up my entire process. And it really makes me learn a ton of new stuff.

  And for flex boxes this link is a handy resource to better understand them. I use them for pretty much everything. Just put everything in a flexbox, open up chrome dev tools and play around with it, and if nothing works the way I wanted it to, it's back to googling. Learning how to google for proper results is an important skill to have anyway, sooo... :)

  0

  

  Daniel Samuel•40

  @DeCaptainDanPosted about 3 years ago

  @Zero0k Thanks so much

  1