Bug in Responsive Web Design Principles: Make an Image Responsive?

Tell us what’s happening:
Even though I’ve done the coding correct, it keeps saying that my "responsive-img class should have a max-width set to 100% " when it already is at 100%. I think this is a small bug, but at the same time someone else completed it and it worked for them. We had the exact same code.

Your code so far


<style>
.responsive-img {
max-width: 100%;
height: auto;
}

img {
width: 600px;
}
</style>

<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299.

Challenge: Make an Image Responsive

Link to the challenge:

It may be a bug, because if I copy/paste your code, the challenge passes for me. However, it may have something to do with the fact that you have two images when the challenge is only supposed to have one. Try deleting the one without the class of responsive-img and see if that helps.

I see you’re using Edge. Try updating to the latest Chromium release or use the Chrome browser.

I always recommend

  1. Check your zoom
  2. Turning off any browser extensions that modify the appearance of your window
  3. Try a different browser

I tried that a few times and still nothing. Thank you for the help though.

I tried going to chrome and it worked! Thank you very much!

1 Like