Profile Card using HTML + CSS (Flex, BEM) questions about spacing + bg

@felipeog, thanks for taking the time to look it over and the really insightful feedback 😄

• I took your advice and utilized the background-image and respective properties instead of imgs– I initially took this route, but didn't realize how specific I could get with background-position and doubted my intuition. This time around, could I ask your opinion on my updated approach under the html element?
• Negative margin-top did the trick! Amazing 🤩
• Understood! With such a simple component I figured I could get away with it, but will keep this in mind going forward especially for bigger challenges!

This has helped tremendously! Appreciate you, Felipe! ✅

Hey, @kvcarido!

I think that the background solution is fine and responsive.

But if you want to go the extra mile, the design has a different size for the background on the mobile version. You can use a @media query to apply different background values for different screen sizes.

Oh, and I forgot to comment on the use of CSS variables before, it is nice!

Keep hacking!

Hi, @ApplePieGiraffe! Thanks so much for taking a look over. 😄

I applied Felipe's suggestions and I'm quite pleased with the results – in applying the background SVGs, I realized I'd need to add a media query to scale them to look like the mobile example. Any suggestions on fixing that?

Great to hear from you again ✅ Happy coding!

@kvcarido

The background SVGs are quite tricky to position in this challenge! I suggest simply using a media query to change their position for the mobile layout of the site since that's a nice, simple way to do it. You can also experiment with using vw and vh units to position the background images so that they do not move around when the screen is resized. 😉

Keep it up! 👍

@ApplePieGiraffe

I actually used both vw and vh units and percentages (with the calc function) to position the background SVGs in this challenge, but that might be overkill! Like I mentioned, a simple media query should do the trick. 😅

Also, I suggest adding the background SVGs to the body (not html), since that's a more common practice and is a little more intuitive (since the body is where all the visible content of the page resides).