3-column preview card component #5

Community feedback

• 

  Mo•840

  @MohamedAridah

  Posted about 3 years ago

  Hello @DefinitelyObsessed , Great job for this challenge.

  I have some notes for you:

  • As LiBee mentioned above the card not centered. This problem cause horizontal overflow for small screens.

  • Add transition property for <button> elements on hover for smoother effect on hover on it

  • you can leave card's image alt attribute Empty. Because these icons not necessary it's just for decoration. And this one of the cases leaving alt attribute empty is a good practice.

  • instead of redeclaring font-family for each element individually. You can set it to the body globally.

  	body {
  		font-family:  "Big Shoulders Display", sans-serif;
  	}
  

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  10

  Marked as helpful
• 

  Doston Nabotov•950

  @dostonnabotov

  Posted about 3 years ago

  Hi, there! That looks great. Except, you need to add border-radius on large screen sizes. Also, it is good to set flex-direction: column; on your cards on smaller screen sizes if you have used flex on them. Good luck!

  10

  Marked as helpful
• 

  LiBee•370

  @Li-Bee

  Posted about 3 years ago

  Good job on the challenge - well done! 👏 A have a few comments for your consideration - i have listed below for ease :

  1. The card is not quite in the center consider using flexbox to center the card component:

  body {
   display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }
  

  2. The titles Sedans, Suvs and Luxury need to capitalised in the design so: text-transform: uppercase;

  3. Compared to the design you need to smooth corners of the card component do add a border radius

  4. Compared to the design the background is not white (#fff) need to add shade to the background.

  5. To fix your accessibility issues add <main></main> around your code.

  11

  Marked as helpful