Responsive column card using flex

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site is pretty good. Main thing's I'd add/modify are:

  • adding a <main> tag to wrap around your page's main content. This is for accessbility purposes
  • centering your container using flexbox. You can assign flexbox to your body. For example:

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

  • make sure you get rid of the margin: 100px auto from your container if you center it with flexbox
  • you should also add some hover effects for your buttons. For example:

  button:hover{
     background: transparent;
     color: white;
     border: white 2px solid;
  }
  

  • your container also doesn't change into column format when in mobile layout, this might be due to your using a max-width: 375px so when I tested with a 375px screen size it doesn't work as it needs to be less than it. My suggestion is to make the max-width around 420px. This way other mobile screen sizes are also supported.

  Hope you find this feedback useful 👍

  Marked as helpful

  1

  ---

  

  Christiana Apinoko•70

  @ShvaynePosted 12 months ago

  Thank you for your feedback @Zy8712

  0