Responsive Preview Card using CSS Flexbox, Keyframes & Media Queries

Community feedback

• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 years ago

  Hey Kyle, Good Job! your solution is really good and both HTML and CSS codes are well organized and structured but there are some improvement which could be made

  1. Avoid writing the CSS codes in the HTML file instead I would suggest you to write external CSS i.e. CSS in other file and then link it with the html by writing this <link rel="stylesheet" type="text/css" href="index.css"> (where index.css is file name) on top of you title code in html.

  2. For making the content align to the center avoid giving manual width, height, padding like here body { padding: 275px 0 0 0; max-width: 100%; width: 1440px; height: 100vh;} this code of yours can be changed to body{min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;} .

  3. Avoid setting images width with pixel units instead use width:100% or width:50%

  4. Avoid using padding and width: 100% on the same element as if you apply width: 100% to the container and then padding, both on addition could made the container more wider.

  hope it helps you....

  Marked as helpful

  0