Used CSS Flex

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  Great feedback from @FlexAgrume there ☝️

  You shouldn't be using position absolute or relative for anything on this. Instead, position the card centrally on the screen using a modern technique like css grid or flexbox.

  This is an opinion and others may disagree, but I strongly advise against resizing your HTML font size to 62.5%. It's too big a subject to cover in full (I'll blog about it soon) but that has a knock on effect on rems across a site. There is no reason why rems need to be divisible by units of 10px. But the negative impact on accessibility if you ever forget to increase the font size on something can be huge.

  Most important of all though is HTML. What you've got at the moment is semantically invalid. You can't have text in a div or span alone, it should always be inside a meaningful element.

  Alt text should never say 'Image' - that element is already announced as an image. While looking at that element, are you aware it doesn't need wrapping in a div? You can apply the border and whatever else you need with a class on the image itself.

  If elements have exactly the same css, they should be using the same css class (not follows/likes/photos)

  Last things - but these are really minor - Don't forget about details like the shadow on the card. And have a look at other people's solutions to see if you can work out how to position those background circles in a way that works at all screen sizes.

  Hope this helps, good luck!

  0
• 

  FlexAgrume•30

  @FlexAgrumePosted over 3 years ago

  Hi sasidhar.

  Here are some feedbacks I can give you :

  1. Rather than forcing the dimensions of your card component, I recommend you to use the max-width CSS property. You don't need forcing height.

  2. Instead of using the "top" CSS property for you card component, I recommend to set a default height for the container. The CSS vh (viewport-height) Unit is great for that. (https://www.w3.org/Style/Examples/007/units.en.html#future)

  3. Why use multiple divs to separate the avatar, name and background image? Use only one div and then play with the CSS flexbox layout. For the card's background image, use the background-position property and the padding-top of your div.

  4. Don't abuse the absolute position property because it can quickly become a disadvantage to make your page responsive.

  5. Here are some useful resources to better understand the background-position property :

  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  • https://css-tricks.com/almanac/properties/b/background-position/

  I hope my feedback will be useful to you. Good luck !

  0