Flex Box And Positioning

Community feedback

• 

  xNyfPtx•1,260

  @xNyfPtx

  Posted 9 months ago

  Your solution is almost similar to the design, here is my feedback

  Looks

  • The main image has no border radius, set one
  • Set the proper fonts

  HTML & Accesibility

  • The main image could be better if you don't use inline svg. You can still reference it using the <img> tag. You would typically only use inline svg you want to manipulate it with other css properties such as fill.

  CSS

  • Replace some of the px units with a rem instead. What rem does is that it makes it scale with the default user font size which is crucial to accesibility. You would typically use the px unit on very small stuff such as borders, outlines, shadows. This can help to decide when to use rem aswell. Also, this can be helpful aswell to decide what CSS unit you should use

  • Never set a fixed width and height. You would typicall only set a fixed width in small elements that will not shrink such as profile pictures and avatars. You will need to use max-width instead. For the height, don't set one unless its a small element aswell. The paddings, text, margins, images will likely take up the height already so there is no need and it makes your card unresponsive aswell. If you really do need to set a height, use min-height instead.

  • Use a CSS reset. Your users will thank you and so do you. It basically makes your CSS look the same in all browsers. I reccomend you use this one. You should also use this in ALL of your projects

  01

  Marked as helpful