Media queries for responsive design, and css variables.

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hello Kevin,

  to allow the browser to choose the appropriate image regarding the screen size, you should use the <picture> element.

  You could do something like this:

  <picture>
    <source srcset="./img/image-mobile.jpg" media="(max-width: 400px)" type="image/jpeg">
    <img src="./img/image-desktop.jpg" alt=" Some alternative text">
  </picture>
  

  This way you are saying to the browser to load the smaller image for devices that are up to 400px wide, and otherwise to load the bigger image. You can also add more image versions by adding multiple <source> elements.

  MDN has a great article about it, to get started:

  <picture>: The Picture element

  Hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  kevin•90

  @kevcoder247Posted about 2 years ago

  @dusan-b Wow you're awesome, I was unaware of the picture element. I even looked up each html 5 element lol. Thanks I will definitely be using this in the future.

  1
• 

  Salmane•220

  @salmaanePosted about 2 years ago

  Hi Kevin! Good job your project is awesome.

  For your question about manipulating images when moving from desktop to mobile or vice-versa, There is many methods but I used to do this one: you have to add the two images (desktop & mobile) to your html code and set the mobile image display property to hidden . and when you move from desktop to mobile by media queries you have to set its display property to block (or inline) and for desktop image set display property to hidden. By this you will be able to change between desktop and mobile images.

  I wish this will help you!

  Marked as helpful

  0

  ---

  

  kevin•90

  @kevcoder247Posted about 2 years ago

  @salmaane thanks thats the method I used. Thanks to @dusan-b I learned the <picture element > can be another method that can save us from writing unnecessary styles. I appreciate the help.

  0
• 

  suhayb jirde•1,050

  @suhaybjirdePosted about 2 years ago

  well done

  0

  ---

  

  kevin•90

  @kevcoder247Posted about 2 years ago

  @suhaybjirde thanks :)

  0