Order Summary CSS Flexbox Mobilefirst

Hey there,

Well done on this one, your solution looks very good! ^^ To answer your question: whenever you can, always use rem/em or other relative units, for pretty much everything. I only use pixels for really small things, like setting box-shadow or borders. By using pixels, you are hardcoding values which may not be suitable for all users. Some people like to change the default font size of their browser for example. If you set font-sizes, padding, etc in relative units (rem, em and the like), these will scale accordingly while px will overwrite user preferences. So if you want to keep responsive design/accessibility in mind, go with relative units, always :)

Regarding your solution, I only have one issue really: it's not necessary to nest a link inside a button element (it's actually incorrect). Choose one or the other, depending on what's more suitable. If it redirect the user somewhere else, use a link. If it adds functionality, use a button, but never both.

Hi, I wanted to add to what Rapha445 said. To make using rem a bit easier and more convenient, you can set the root font size to 62.5% of default browser font size which is 16px. This will cause 1rem to be equal to 0.625 * 16px = 10px. This way, you won't have to do additional calculation when converting between rem and px in your mind. For example, if you want to set a padding of 20px, you can just use 2rem.

html {
   font-size: 62.5%;
}

body {
   font-size: 1.6rem;
}