All comments

• 

  sasidhar•10

  @voiddataSubmitted over 3 years ago

  Hello World! I am somewhat low level in background positioning of images, so please provide some feedback or guidance on how i can improve that.....

  Also i would love to hear any type of feedback (positive or negative) regarding my solution.

  Thanks.

  

  Used CSS Flex

  2

  10
  

  FlexAgrume•30

  @FlexAgrumePosted over 3 years ago

  Hi sasidhar.

  Here are some feedbacks I can give you :

  1. Rather than forcing the dimensions of your card component, I recommend you to use the max-width CSS property. You don't need forcing height.

  2. Instead of using the "top" CSS property for you card component, I recommend to set a default height for the container. The CSS vh (viewport-height) Unit is great for that. (https://www.w3.org/Style/Examples/007/units.en.html#future)

  3. Why use multiple divs to separate the avatar, name and background image? Use only one div and then play with the CSS flexbox layout. For the card's background image, use the background-position property and the padding-top of your div.

  4. Don't abuse the absolute position property because it can quickly become a disadvantage to make your page responsive.

  5. Here are some useful resources to better understand the background-position property :

  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  • https://css-tricks.com/almanac/properties/b/background-position/

  I hope my feedback will be useful to you. Good luck !

  0