Make an Image Responsive..,

HTML-CSS
1

Tell us what’s happening:
well I’m being told that my max-width isn’t set to 100% and I don’t understand why

Your code so far


<style>
.responsive-img {
img {
max-width: 100%;
display: block;
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 (X11; CrOS x86_64 12607.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.86 Safari/537.36.

Challenge: Make an Image Responsive

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

2

Welp I figured it out

3

How did you figure it out? I still cant…

4

Making images responsive with CSS is actually very simple. You just need to add these properties to an image:

img {
  max-width: 100%;
  height: auto;
}

Here in the example that they provide us, they give the styling rules to img, what you need to do is:

Add the style rules to the responsive-img class to make it responsive.

In the code provided @thatsme1155667788 had nested img within the responsive-img class. Try and remove the img {} within the responsive-img class.

5

I see what happened, It wouldn’t work in Microsoft Edge, I had to use a different Browser