Error in Responsive Web Design Principles?

HTML-CSS
1

Tell us what’s happening:
Hello, in the lesson “Responsive Web Design Principles: Make an Image Responsive”, I cannot seem to fulfill the criteria. The tests pass for max-width and height, but not for display. I keep getting this result no matter how I spell display or block.

// running tests
Your img tag should have a display set to block.
// tests completed

Is there an error or am I being an idiot? Any help would be appreciated. Thank you.

Your code so far

html

<style>
  
</style>

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

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/74.0.3729.169 Safari/537.36`.

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

Your css should be inside the style element, not in that way in the img tag

The new code should be added inside the style element

3

Hi ieahleen,

I am having the same problem, used your idea on putting the code inside the element, and got the exact same error…that " Your img tag should have a display set to block." I have that, just as Armando above. Also, I then copy-pasted from the lesson’s text as well as from Hint link, which is all the exact same syntax, and got the obvious same error messages. Code below:

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

Let’s take a look at your <img> tag.
First of all, the styles you gave it throw a huge html error.
The proper syntax should be:

<img src = "[image link]" alt = "[alt text]">

I see that you’ve probably confused in-tag styling

View Syntax

<h1 style = "color:red;" ></h1>

With css styling

View Syntax 
h1 {
   color:red;
   
}

What you’ve tried is incorrect syntax.

if you want to style an element with multiple rules, it’s more easily readable if you do it within the style tags.

Try to fix your code and see if you pass the challenge.

5

Hi Conner,

It must have just been a glitch, because I reentered my original syntax in the “Style” area, as ieahleen suggested, and it worked. So, all I entered was:

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

On your suggestions above, I tried putting this inside the “img src=”…AREA…", but nothing worked. That said, I am obviously new to all of this and am still stumbling my way around.

Thank you very much for replying to my post…I will recheck your suggestions in the future to see if I can better understand what you wrote above.

Cheers!

1 Like
6

Hey ieahleen, I tried your suggestion again today, and voila!..it worked! I guess it was just a glitch.
Thank you for your tip!
Cheers!