Responsive Profile Card using native CSS & HTML

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey there, Hoophelie! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice job on this one! 👏

  Those background images can definitely be pretty tricky to position nicely! 😉 I suggest using viewport units to position them because then they'll more or less remain in their place when the screen is resized. I tried positioning the background images in my solution for this challenge using this method and it seemed to work out pretty okay! 😄

  Also, this is a tiny suggestion, but I think an <article> tag would work better here for the card component (rather than a <section> tag) since the component is more like a self-contained item rather than a section of something else. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Hoophelie•110

  @HOOPheliePosted almost 4 years ago

  @ApplePieGiraffe Thank you so much!! I used your piece of code and played a bit with it. 😊 I added a break point for the mobile version so I can have more control(not necessary but I didn't want to just copy paste your work). And I didn't know I needed a min-height : 100vh for it to work 😅`

  Thanks again!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @HOOPhelie

  NP! Glad that was helpful. 😀

  Yeah, I can remember so many times where I struggled with backgrounds all because I didn't think of/forgot to add min-height: 100vh to the body where applicable! 😅

  Anyway, have fun coding! 👍

  0

  

  Hoophelie•110

  @HOOPheliePosted almost 4 years ago

  @ApplePieGiraffe Would you mind explaining why it doesn't work if I don't apply min-height :100vh ?🤗 How does it behave if I don't specify it?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @HOOPhelie

  Sure!

  By default, the body will only be as high as the content inside it. This means that for a page consisting of a small component (such as the card, in this challenge), the body will only be as high as that small component and therefore won't fill up the entire screen on something like a desktop device.

  In your case, you used absolute positioning to center the card component, which means the card component is removed from the normal flow of the page, and the body is even shorter due to it only being as high as the attribution at the top of the page. Of course, either way, this doesn't leave enough space for you to position the background images as you would like it.

  Adding min-height: 100vh to the body ensures that it is always at least as high as the entire height of the screen, which should give you enough space to position the background images well.

  BTW, I recommend using flexbox to center things (rather than absolute positioning), since it's a little easier and you can save the transform property for some other more useful purpose. 😉

  Hope that helps. 🙂

  Have fun coding! 😄

  1

  

  Hoophelie•110

  @HOOPheliePosted almost 4 years ago

  @ApplePieGiraffe It was so clear! Thank you very much! Got it for using flexbox next time🤗

  1

  

  Hoophelie•110

  @HOOPheliePosted almost 4 years ago

  @ApplePieGiraffe I updated with flexbox! Don't know why I didn't think about it 🙊

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @HOOPhelie

  Alright, cool! 👍 Using flexbox when possible definitely makes things easier! I love it and use it a lot, too! 😀

  1