Mobile First Design Profile Card Component BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The layout of course at desktop state is wider than the design and reducing it would be really nice. Also, I saw that there are other usages of @media on this one. I think you could do this challenge without using the @media since there aren't really anything to be changed. You just need to set a single max-width on the card and that's it.

  For some other suggestions, here are some:

  • Avoid using height: 100% or height: 100vh on a large container like the body or html as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Instead of applying the blue background-color in the main tag, apply it on the body tag so that the full height of the screen will contain the background-color.
  • The .page__wrapper is using a height: 100vh as I said, avoid usage of vh unit in the height in general.
  • When using img tag, do not forget to add the alt attribute, whether the value is empty or not. Because by not including it, screen-reader will instead read the source path of the image which you don't want. So always include it.
  • The person's img could use the person's name as the alt value since it is already present and it makes sense to add so because this component is all about the person.
  • For the .card__footer, if you look at the content inside that section, you may notice that those are "list" of information about a specific user. Using either ul or dl would be nice on this one and I prefer using dl on it. You could go with a markup something like:

  <dl>
    <div>
      <dt>Follower</dt>
      <dd>80k</dd>
    </div>
  </dl>
  

  A div is a valid direct child of dl tag. The dt should be the text at the bottom part and not the number, so to reverse the placement. Use:

  display: flex;
  flex-direction: column-reverse;
  

  On the div that contains the dt and dd tag.

  • Lastly, maybe coming up on a solution where you don't need to use @media on this one. Using @media many times is not wrong but if you don't really need it, then don't, just make the layout responsive:>

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  kadek wijaya•140

  @WijayaacPosted almost 3 years ago

  @pikapikamart Hey, Thank You for your suggestions, i never heard about <dl>,<dd>, and <dt> tag before, but i wanna use it in this project, as you said using @media too often make me not creative with the solution, and again Thank You for your suggestions, it's really help me to improve and use the best practices

  1