profile-card-component-main Public

Community feedback

• 

  Fury•945

  @ashiqfuryPosted about 3 years ago

  Great work.

  • You can center anything with this two lines of code :

  body {
        display: grid;
        place-items: center; 
  } 
  

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks really good.

  Some suggestions would be:

  • Using two section doesn't really help the structuring on this one, since the card is only a single component. For example, if a user navigated on the main tag, maybe a user will be confused on why there are two section element that is direct child of it, an initial though would be that there are 2 section of the main that have content, which on this case, it doesn't. If you will use these 2 section then make the card article then place the 2 section inside it. This way, it will be more clearer to the user since the section are from the article.
  • The alt for the wavy background in the card should have been left empty like alt="". If an image that you are using acts as a decoration, then use alt="" on it, if the image adds content, then use descriptive alt value.
  • The person img should only use alt="Viktor Crest" as the value, lose the word "image", avoid using words that relates to "graphic" like "image, icon, logo...", assistive tech will handle those for you. No need to describe an image to be an image, it is already an image :>
  • The bold numbers below shouldn't be a heading tag, because making it a heading tag doesn't really add any meaning at all right, like why would you make a number a heading of something. Some design files have bold text or element, but it doesn't mean that they should be heading.
  • Also, those 3 at the bottom, you could have used ul on it, since those are "list" of information about the person.

  Aside from those, great work on this again.

  0
• 

  satyam•115

  @satyamchaudharydevPosted about 3 years ago

  Hey, centering any element is not that hard. For center :- use display flex to the parent of element that you want to center and parent must have width and height.

  .your_parent_element{ display: flex; justify-content: center; //horizontally center align-items: center; //vertically center }

  0