Tell us what’s happening:
I want to know why the posted “official” solution didn’t work, but my solution does.
official campbot solution.
<style>
.responsive-img {
max-width: 100%;
display: block;
height: auto;
}
img {
width: 600px;
}
</style>
Your code so far
vs my code
<style>
.responsive-img {
img {
max-width: 100%;
height: auto;
}
}
img {
max-width: 100%;
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/80.0.3987.116 Safari/537.36 OPR/67.0.3575.105
.
Challenge: Make an Image Responsive
Link to the challenge: