Order Summary CSS Flexbox Mobilefirst

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  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.

  Marked as helpful

  0

  ---

  

  Rapha445•100

  @Rapha445Posted almost 3 years ago

  @FluffyKas Thanks a lot for the feedback, that's actually super helpful !

  I see! I was wondering because my friend who's a web designer always builds her design in pixels. But I guess it's better to convert evrything into relative units for accessibility.

  Noted for the nested link inside the button. I just corrected that and opted for a button element :)

  Thanks!

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @Rapha445 @Rapha445 This article is about this topic exactly! :) But to sum it up, I reckon most designs you encounter will be in pixels and it will be your task to translate them to relative units. It's a bit of a hassle at first but you'll get a feel for it very soon as you practice! ^^

  Marked as helpful

  0

  

  Rapha445•100

  @Rapha445Posted almost 3 years ago

  @FluffyKas Thanks for the link. Looks like a whole topic to dive into 😆

  0
• 

  Mushfiq Rahman•300

  @Ayon95Posted almost 3 years ago

  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;
  }
  

  0

  ---

  

  Rapha445•100

  @Rapha445Posted almost 3 years ago

  @Ayon95 Thank you for the tip! I'll try it next time :)

  0

  

  Mushfiq Rahman•300

  @Ayon95Posted almost 3 years ago

  @Rapha445 Sure, no problem :)

  0