Responsive using flex box

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Mateo, good job! I took some time to look at your code and have some ideas for improving it:

  • instead of using % try to use relative units of measurement like rem -> read here
  • remove height from main tag and add width: 20rem and fix the padding-bottom
  • remove max-height, min-height, max-width and min-width from img element and add width: 100%
  • remove all margin from main class because with flex they are superfluous
  • add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Overall you did well 😉

  Hope this help and happy coding!

  0
• 

  vcodey•270

  @v-codeyPosted over 2 years ago

  hey @BlackSheldt congratulations on completing your first challenge.

  there are some issues with your design.

  • using pc.css i.e. media query for bigger screen was not that necessary for this challenge.
  • however % as units works not that great at times, I suggest using px or rem.

  overall you did good.

  keep learning happy coding 👍

  0
• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  hi Mateo Giraldo if this your first time then you did it great but there some errors you can check on it to improve your skills in css 1-you have a problem with flexbox if you want to make element in center you can use flex-direction column instead of row and flex wrap 2- you can with a specified width instead of use vw because vw it's change when the screen shrink or extend so you can use 300px in width and in height you can you 600px 3-in main you flex-direction:cloumn, justify-content:space-between and align-items: center to make it better and use this same thing in article part 4- you can find all thing you want about flex in this website(https://www.w3schools.com/cssref/css3_pr_flex.asp) 5- you can find all thing you want about center element in the middle of the page in this website (https://blog.hubspot.com/website/center-div-css)

  0