Responsive using flex box

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!

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 👍

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)