Responsive layout with bootstrap card and layout , Css and Html

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted almost 3 years ago

  Hi Kester, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • remove all margin from card class
  • 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
  • instead of using px or % use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  00
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hi Kester Munetsi, congrats on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  00