Responsive page using flex and media query

Community feedback

• 

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hello there!👋 Congratulations on finishing this challenge.

  • You can make your component responsive only by using grid or flexbox and avoid using media queries.

  Using flex-wrap and flex, If you want to use flex. More info: flex-wrap.

  Using auto-fit and minmax(), If you want to use grid. More info: responsive-grid.

  • Also in picture element, you can use source so that you don't have to write anything on CSS and adding media query to change the image.

  More info on MDN.

  If you need further clarification, feel free to reach out to me.

  Keep up the good work.

  Marked as helpful

  1

  ---

  

  Mateus Barbosa•20

  @mteusbarbosaPosted almost 2 years ago

  @hesamf01 Thank you so much for sharing those links, I'll do my best to understand the difference between grid and flexbox, also when i need to use them. But first i need to understand the picture element, because it's causing HTML reports.

  0

  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  @mteusbarbosa

  • Maybe this article can help you to know when to use flexbox and when to use grid.

  • About the HTML reports, within the picture element, you can only have one image using the img element. The other image must be a source element.

  1
• 

  Nikola D•1,510

  @NikolaD93Posted almost 2 years ago

  Hello nice work 👌👌 Here are some breakpoints I use: 👇 320px — 480px: Mobile devices. 481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops. 1025px — 1200px: Desktops, large screens. 1201px and more — Extra large screens, TV. Hope this was helpful! 👋

  Marked as helpful

  1