# Problem with reactive image code? Assessment wanted

**URL:** <https://discourse.mozilla.org/t/problem-with-reactive-image-code-assessment-wanted/85457>\
**Category:** Learn\
**Tags:** issue\
**Created:** [September 4, 2021, 1:38am UTC](https://discourse.mozilla.org/t/problem-with-reactive-image-code-assessment-wanted/85457 "2021-09-04T01:38:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cwmarshall](https://avatars.discourse-cdn.com/v4/letter/c/90ced4/32.png) [@cwmarshall](https://discourse.mozilla.org/u/cwmarshall)\
**Post date:** [September 4, 2021, 1:38am UTC](https://discourse.mozilla.org/t/problem-with-reactive-image-code-assessment-wanted/85457/1 "2021-09-04T01:38:53Z")

</div>

Trying out the advice from [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia\_and\_embedding/Responsive\_images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) I can’t seem to get my own code to work the way the instructions are anticipating (the image does not resize to fit the browser window size and automatically starts on the smaller 480px width version of the image). Do you see what my error is?  
[https://codepen.io/CWMarshall/pen/RwgGPeO](https://codepen.io/CWMarshall/pen/RwgGPeO)  
note that this is just the code itself, not the images included.

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [September 4, 2021, 2:13am UTC](https://discourse.mozilla.org/t/problem-with-reactive-image-code-assessment-wanted/85457/2 "2021-09-04T02:13:52Z")

</div>

Hello @cwmarshall

Your are mixing up the attributes of `<source>` and `<img>`

Either use `<source>` inside `<picture>` with `media` and `srcset`:

```auto
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

```

or use `<img>` with `sizes` and `srcset`:

```auto
<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

```

Hope that helps!  
Michael

---

<div class="post-metadata">

**Author:** ![cwmarshall](https://avatars.discourse-cdn.com/v4/letter/c/90ced4/32.png) [@cwmarshall](https://discourse.mozilla.org/u/cwmarshall)\
**Post date:** [September 4, 2021, 2:17am UTC](https://discourse.mozilla.org/t/problem-with-reactive-image-code-assessment-wanted/85457/3 "2021-09-04T02:17:01Z")

</div>

Ok that’s what I originally thought but because the instructions seemed unclear about asking me to use the element with the size attribute. So I was trying to combine the two, but I see the instructions were just unclear. Thank you!