Responsive 3 column preview card only CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey Peally, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • remove all margin from main tag
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • use h2 for the titles of cards
  • use button for the learn more buttons and not a styled p
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Peally! 👋

  Great work on this challenge! Your solution looks pretty good! 😀

  I recommend adding max-width to main element to prevent the cards from becoming too large on one column layout.

  Other recommendations from me.

  • For the "Learn More" buttons, I recommend using interactive elements such as link or button element. Remember, always use an interactive element if the element has interactivity.
  • In this case, all the car icons are decorative images so I recommend leaving the alt empty. This way, screen reader users won't have to listen to the unrelated or unnecessary content.

  That's it! I hope this information is useful! 😁

  Marked as helpful

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution looks great bit on smaller devices you have to

  • reduce the margin left and right for your each container to have enough width, they look squashed together in small devices.

  • Remove any positioning property on the footer and just add text align center.

  Besides hope that was helpful. 👍 Good job, keep coding friend👍👍

  Marked as helpful

  0
• 

  Peally•200

  @PeallyzPosted over 2 years ago

  Thanks you all for your tips I used most of all to correct my code.

  Have a nice day !

  0