Profile Card with HTML, CSS & Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. The overall layout I think looks great. To be honest, I don't mind the 2 background-blob-images to not be on the exact spot like on the design^

  tom already gave a feedback on this one, just going to add some suggestions as well:

  • Avoid using height: 100% or height: 100vh on a large container like the body 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.
  • On your main tag, replace the width: 340px into max-width: 340px so that it won't have a fixed width and use width: 100%.
  • For the person's image, typically, when you want to center an element, you would use margin: 0 auto, so instead of margin: 0 115px 15px; use margin: 0 auto 15px and add a display: block on it so that it will be adjusted.
  • Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
  • For each of the .stats text-content, those number-text like 80k aren't really heading tags because by making it one, it doesn't really give any information on what the section would contain. A p tag replacement would be nice.
  • Also, if you look at the .stats content, you can see that those are "list" of information right. It would be nice to use either ul or dl on this one, but I prefer to use dl on this. The markup looks like:

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

  You would need to have 3 div since there are 3 items in there and yes, you can use div inside of a dl tag but not on other list tags. On each div, you can use :

  div {
    display: flex;
    flex-direction: column-reverse;
  }
  

  So that the placement will be reversed. Remember to each use the text like followers, likes as the dt.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  Wild_Tsunami•120

  @WildTsunamiPosted almost 3 years ago

  @pikapikamart Thanks for your suggestions, I changed several things. I still don't get your second point though, the "width: 100%" doesn't seem to change anything.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @WildTsunami Hey, glad that you implemented some of my suggestions^^

  For the width: 100% part, the reason for that one is that, you want the element to take the full 100% of the parent's size so that it will fill up the max-width that is set to it. Because if you don't set the width: 100%, then it won't have a full width and will only have enough width that will contain the content.

  Have a try on this one, inspect your solution on this using dev tools. Go to the main tag and try unchecking the width: 100%. It will show you that the card's size changes^^

  Marked as helpful

  0
• 

  tom•175

  @tomsky90Posted almost 3 years ago

  Hi. Nice work. I would try to create a container like a page wrapper then add img in your HTML and then try to use position absolute. Hopefully that will work. :)

  Marked as helpful

  0