card with flex

Community feedback

• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi, Here you have some suggestions on how to improve your component:

  • body{display: flex; justify-content: center; align-items: center} Set this settings for the body to center the main content both horizontally & vertically.
  • Make sure the body has a height of 100vh;
  • Create a main component and set its border radius to 10px & overflow: hidden to make the rounded corners for the image.
  • Create two child elements (divs) one for the image & one for the heading, text & button;
  • Set display flex to the main component and change the flex-direction to *column * on smaller screens.
  • Check the details more carefully, Perfume is uppercase and the text background color is white

  Try these changes and let me know how it goes... Happy coding!!!

  Marked as helpful

  1

  ---

  

  mohammed abdo•220

  @Hazard-58Posted over 2 years ago

  @fatlindshehu thank you very much for this suggestions they helped me improving my codes in the challenges next to it thank you.

  1