Profile Card Component Challenge

Community feedback

• 

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  Just checked: quotes between brackets aren't necessary: url('...') or url(...) doesn't matter. I didn't have them in my solution and it loaded pictures anyway but it is considered a good practice to include them.

  1

  ---

  

  Mark Sainsbury•45

  @Sa1nersPosted almost 4 years ago

  @hachi-ops Thats great, many thanks indeed.

  0
• 

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  Yes you can have two images separated by commas:

  background-image: url('...') , url('..');

  1
• 

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  Hello Mark, You are missing double quotes in your index.html in line 36 (but I don't think this is the reason why it displays incorrectly :)

  Actually the design is there if you scroll down. It shows the card exactly in the middle of the page:) Vercel should update git hub changes automatically but maybe if you try to login to Vercel again and see what happens.

  1

  ---

  

  Mark Sainsbury•45

  @Sa1nersPosted almost 4 years ago

  @hachi-ops thanks, good spot on the quotes!

  i have made some changes so hopefully it will look better this time, although the Frontend mentor site looks like it is down at the moment!

  0
• 

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  Yep, we can't see anything. Did you push your latest code up to the repo? Make. Sure everything is staged, committed and pushed, then update your solution and generate a new screenshot & report.

  Good luck

  1

  ---

  

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  Actually, code is there! Did you preview this? I think you need quite a few changes to this...

  HTML :

  • you can only have one h1 per page
  • think about what makes sense as a heading (eg 80k doesn't, it needs to be in the same tag as followers)

  CSS:

  From a quick glance I would recommend:

  • removing position absolute from the card
  • setting min-height 100vh on the container
  • making the container into a flex column and using justify content and align items to center the card
  • giving the container a small amount of padding, like 1rem
  • giving the card a max-width
  • letting the background images be background images on the container rather than placing them in image tags

  I think the reason we can't see anything in your site is because of the position absolute at the moment on the card. That takes it out of the normal document flow. So when you set the height of the container to auto, the container thinks its got no content, so it doesn't need any height.

  The changes I suggest will help. I think.

  Good luck with it 👍

  1

  

  Mark Sainsbury•45

  @Sa1nersPosted almost 4 years ago

  Grace, Many thanks indeed for taking the time to review and respond to my project. It's incredibly useful for me as a new developer.

  0

  

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  @Sa1ners you're welcome. Remember to upvote comments you find helpful on here so people can develop mentoring skills ☺

  1
• 

  Ever Daniel•35

  @edgg72Posted almost 4 years ago

  Hello Mark, it seems that you didn't upload everything correctly, check that again.

  1
• 

  Hachi•155

  @hachi-opsPosted almost 4 years ago

  This comment was deleted over 3 years ago

  0

  ---

  

  Mark Sainsbury•45

  @Sa1nersPosted almost 4 years ago

  @hachi-ops i think you created a fork, but like you i am new the github! thanks for the additional feedback though.

  0
• 

  Mark Sainsbury•45

  @Sa1nersPosted almost 4 years ago

  ok thats appreciated. can you have two images as background-image lines within the body CSS entry? I will also try removing the background-size:cover entry.

  0