Responsive web responsive web design

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
.responsive-img {


}

img {
max-width: 100%;
display: block;
height:  auto;
}
</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/70.0.3538.102 Safari/537.36 Edge/18.18363.

Challenge: Make an Image Responsive

Link to the challenge:

2

Hello @outoftime!

Take another look at the directions. It wants you to add height and width to the .responsive-img class in you css. You added it to img.

3

This is what I have done and it’s still not working?

20200802_094411.jpg
20200802_094411.jpg2016×1134 566 KB

4

You are changing things in the code that you weren’t directed to. The directions didn’t say to delete

img {
  Width:600px;
}

It also didn’t say to add display:block; to the css. I don’t know if that’s the culprit for it failing but Try only doing what the directions say and see what happens.

This passes

image
image1242×2688 511 KB

5

Sorry I am not crazy I have done this in so many ways and the way you’re telling me to and still no go?

20200802_160740.jpg
20200802_160740.jpg2016×1134 589 KB

6

@outoftime Not sure then. Check that your web browser isn’t zoomed in or out at a level that could be causing the program to think that your css is wrong.

7

Nope I have checked it man. Every other lesson was perfect just this one wasn’t taking it?

8

Sorry I couldn’t help. Aside from just trying on another browser or even a different device I don’t know.

Maybe someone else can jump in.

9

Ok thanks for your help!