Responsive 3 card layout using Grid

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  hi Andrew

  I took some time and did some work to make look close to perfection . here are my suggestion and actions applied to your code inside the style.css file

  1 . The mobile view on small screen can be improved by replace line 20 to 21 with this

  .boxes { display: flex; flex-direction: column; max-height: 50vh; bottom: 10vh; }

  2.Add to "container " class line 11

  .container {

  min-height: 100vh;
  

  }

  3. Remove line 67-69 for under media queries

  4 . Set line 68 media query to 600px that is like this @media (min-width: 600px) {}

  5 . Add on line 70 this CSS properties

  .boxes{ display: flex; flex-direction: row;

  }
  

  6 . Set media query to 1024px on line 133

  @media (max-width: 1024px) {}

  Marked as helpful

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 👍

  keep improving your programming skills

  your solution looks great, however, if you want to improve it, you can follow these steps:

  🟢 please add transitions for better ui

  🟢 change input to button element to improve a11y

  🟢 page should contain only 1 h1 heading, so please change it to h2, or etc

  🟢 please add alternative description to images, or hide using aria-hidden

  I hope my feedback will be helpful

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0