3 card component(Fully responsive and easiest)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout in desktop is good, as well as the mobile layout. Resizing, the button on the card seems to have different effects, like the one gets the text wrapped, the others are not.

  Some suggestions would be:

  • When you create a website, always include a main element that will wrap the main content of that site. On this, wrap the whole layout in the main tag.
  • Avoid using multiple h1 tag. Only use 1 h1 per page. On this, the title or the name of the cars could have used h2 tags, then the h1 could have been only for screen readers. It would have a sr-only class. You can search about screen reader classes. It is just css stylings that you apply to an element, rendering it for screen readers users only.
  • The icons for the cars should have the alt attribute, but leave it blank like alt="".
  • Also, if you want the cards to have the same sizes, since you are using display: flex, on those 3 cards, set their flex-basis to flex-basis: 100%. This way, those 3 cards will have the same sizes. Apply it on the .card1 .card2 and .card3 selectors.
  • Just a quick to what I said in main tag, your section element could have been replaced by the main.

  You did a good job in here, just a simple retouch of html would be really awesome. Good job.

  Marked as helpful

  0

  ---

  

  Abhinay Gunjal•85

  @AbhinaygunjalPosted about 3 years ago

  @pikamart yeah! Pointed out right, i will definitely implement it and recorrect it. And thank you for the flex-basis thing, i didn't knew about it, i mean heard it from you and that definitely works! It was very helpful, Thank you very much!

  0