3-column preview card component | Mobile First | CSS Flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 1 year ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  1. No.
  2. No. From 370px - 460px, everything is squished.
  3. No. You are using padding-bottom for texts when you should be using margin instead.

  • Remove all the article you have added to your code; they are not being used correctly. In order to use the article element, the content has to make sense on its own and has to be independently distributable (the content can be placed on ANY site and still make sense).

  • The icons in this challenge are purely decorative which means that their alt tag should be left blank (alt="") to tell screenreader that is should be ignored.

  • The h1 heading is only allowed to be used once per page. In your content it is being used multiple times.

  • To properly center your content to your page, you will want to add the following to your body (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • In modern Web Development, all content is built mobile first, in which you style for small screen first and use media-query to style for larger screens. This will ensure that performance and responsiveness are prioritized.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  Mayank Arora•430

  @mayankdrvrPosted about 1 year ago

  Thank you @vcarames for the code review. I have implemented all the above suggestions according to my understanding and will try to keep them in my mind for my future challenges.

  0