Profile card component using CSS custom properties and Flexbox

Community feedback

• 

  Doston Nabotov•950

  @dostonnabotovPosted over 1 year ago

  Hey, there!

  Congrats on completing the challenge.

  I really liked your approach on semantic markup and good CSS code.

  Here are some suggestions I would like to make:

  • As of your question, do not heavily rely on viewport units. Because if the user tries to zoom in or zoom out, it really gets out of control. Instead try switching it something like this:

  .profile {
    width: calc(100% - 2rem);
    max-width: 21.875rem;
    margin-inline: auto;
  }
  

  Or if you want one line:

  .profile {
    width: min(100% - 2rem, 21.875rem);
    margin-inline: auto;
  }
  

  100% - 2rem indicates that it can stretch to 100% full width, but with 1rem extra spacing on each side. I used margin-inline: auto just in case to horizontally center the element.

  • Speaking of fixed height on your image, I liked the descriptive comment explanation. But, here's the better way you might wanna consider:

  .profile__decoration {
    background-image: url("images/bg-pattern-card.svg");
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  

  Basically, you rely on your dynamically changing width to determine the height of your image. Find out what ratio it uses and apply it.

  Good luck on your coding journey!

  Marked as helpful

  1

  ---

  

  P

  Wessel Konstantinov•350

  @WesselKonstantinovPosted over 1 year ago

  @dostonnabotov Thank you very much for your feedback and suggestions! The one-liner with min() for the width looks very nice. I also like your solution with the aspect-ratio property. I have heard about this property, but I never knew how to actually use it. This seems like a much better way to render the background image without having to set a fixed height. I will try to add these suggestions to my coding repertoire. Thanks again for your feedback!

  0