Profile card component with vanilla CSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Steffan! 👋

  Good work on this challenge! I see you really do have some interesting calculations for the background-position property. Your solution still looks pretty good, though, as is. 👍

  I hopped into this challenge and tried to play around with different ways to position the background images, and I agree that they seem to move all around when the page is resized! 😉

  CSS has an interesting way of positioning background images when using percentages (which might explain why using percentages didn't seem to work so well for me) that has a bunch of math involved. See the section "Regarding percentages" on MDN's page on the background-position property. 🤓

  I noticed you found that the background images remain in their place (and don't move so much when the page is resized) when using vh and vw units. However, according to the design JPGs, the background images seem to change their position slightly in the mobile layout, so perhaps this wasn't the exact positioning method that was used. 🤨

  Anyway, those are just some observations. Good job, once again! 😊

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  ‮naffetS•275

  @Steffan153Posted about 4 years ago

  Thanks! I'll try that. (I think I actually knew that lol, but when I was doing the challenge I was thinking so hard that I didn't think of that. Idk)

  0

  

  ‮naffetS•275

  @Steffan153Posted about 4 years ago

  Meh, unfortunately it didn't really work :/ The only way I could figure anything out was to have a media query for about every 20px. xD

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @Steffan153

  LOL—no worries, close enough! 😅

  0