CSS FlexBox, JS

Community feedback

• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  Hey, nice job on this one👍.

  You don't need to use js to change the image to make it responsive.

  • You can use the html picture tag with the source tag, and you can set a media query breakpoint using media attribute. It would look something like this:

  <picture>
    <source media="(min-width:920px)" srcset="desktop-img.png">
    <source media="(max-width:400px)" srcset="mobile-img.jpg">
    <img src="fallback-img.jpg" alt="image">
  </picture>
  

  Or you can use the srcset attribute on the img tag itself.

  Learn more: Link-1, Link-2

  • And also, if you wanna use media queries in js, instead of using offsetWidth, you can use the native window.matchmedia() method. Like this:

  const mediaQuery = window.matchMedia( '( min-width: 768px )' )
  
  if ( mediaQuery.matches ) {
    console.log('Media Query Matched!')
  }
  

  Learn more: A Complete Guide to CSS Media Queries - css-tricks, window.matchmedia() - MDN

  Marked as helpful

  1

  ---

  

  _SabijaThor_•355

  @SasaVaticPosted over 3 years ago

  @FarisPalayi I appreciate your feedback. It helped me improve my code, thank you!

  1