profile card componant

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey good work on this one. But first a couple of suggestion.

  1. Changing the .profile_box of position: absolute. Since you declared it like that, the body tag now has no height dimension because when you position: absolute an element, it goes out of the flow, so any container containing them will have their dimension be gone, unless there is specified height or width on it.

  2. Adding more width. Right now it only takes 35% of the viewport's width which is very small when going in mobile state. Maybe it will be good if you declared like a fixed width on it. And just change that width in the breakpoint.

  Now, regarding you query.

  1. Okay for background positioning, you can declare background like this, this is a shorthand version to avoid many typings. `background: hsl(185, 75%, 39%) url("/images/bg-pattern-top.svg") no-repeat -50% -50%.

  Okay let's break that down so that it will be easy.

  • As you can see, the first argument is the background-color the hsl
  • The second argument is the background-image that you want
  • The third argument, it is important, usually when we want a single image, we use no-repeat as the value, in your case you use repeat which makes things a bit of mess. no-reapet is the best choice in here.
  • The fourth argument is the background-position. You can specify there where you want the image to be placed. The first -50% is the x-axis and second is the y-axis.

  Now using background-property, you can declare multiple things like this one.

      background: url("/images/bg-pattern-top.svg") no-repeat -50% -50%,
                             url("/images/bg-pattern-bottom.svg") no-repeat center top,
                            url("/images/bg-pattern-top.svg") no-repeat 25rem  33rem;
  

  As you can see, you can declare multiple things like that, I usually don't add the background color in that, if I am declaring multiple images. I seperate it.

  2. For the list like you mentioned, using display: flex on the parent ul is one great solution, or using grids. Using them will make your css more minified since you only need to declare few right. Reading about them is really good.

  Just those few above needs to be addressed. The mobile views needs to be changed as well as the image on that container is having a big height which is kinda bothersome. Just study those and just keep doing challenges, but doing it the right and semantic way. Okay^^

  1

  ---

  

  Bhakskar•110

  @imbhaskarnPosted over 3 years ago

  Thanks a lot @pikamart for sugestions

  0
• 

  Jenna•125

  @jamby4546Posted over 3 years ago

  there is lots of ways to display the last three stats items. I struggled a lot too. When I did it, I used bootstrap card for the whole thing and then for the list items I used display:flex and flex-direction: row. However now that I have learned a little more, I wish I had used CSS grids for the list items, or maybe even the whole layout. When I did this challenge I didn't know CSS grids and this video https://www.youtube.com/watch?v=jV8B24rSN5o really helped me learn and understand how to implement it in later challenges.

  flexbox is another option, but I for some reason really struggle implementing it. good luck!

  0

  ---

  

  Bhakskar•110

  @imbhaskarnPosted over 3 years ago

  @jamby4546 thanks

  0