Trouble with responsive image - tribute page

Hi there; I’m trying to make my image responsive for my tribute page, and I cannot for the life of me figure out why it’s not working.

Any help would be hugely appreciated because I’ve been stuck on this part for days. I’ll add the code below, as well as a link to my Codepen.

HTML:

<div id="img-div">
  <img src="https://digitalsynopsis.com/wp-content/uploads/2017/06/beautiful-color-palettes-combinations-schemes-beautiful-blues.png" alt="#" id="image">
  <figcaption 
              id="img-caption"> 
    A blue colour scale running dark to light
  </figcaption> 
  </figure>
  </div>

CSS:

#img-div {
    display: inline-block;
    text-align: center;
    height: 400px;
    width: 800px;
  }
  #img-caption {
    text-align: center;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    font-color: #030011;
}
#image {
  max-width: 100%;
  height: auto;
}

Codepen Link

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)

The first failing message reads;

I should see either a <figure> or <div> element with corresponding id="img-div".
expected null to not equal null
AssertionError: expected null to not equal null

Btw, the code you posted here does not match the codepen link you gave. Did you remember to hit “save”?
Here’s your codepen code (with a typo)

<div="img-div">
    <img src="https://digitalsynopsis.com/wp-content/uploads/2017/06/beautiful-color-palettes-combinations-schemes-beautiful-blues.png" alt="#" class="responsive">
    <figcaption id="img-caption">

Hey, thanks for the reply! I was actually on tweaking my code when you replied, haha. That checkpoint has since been fixed, and all that remains is making my image responsive.

My codepen code now reads


<div id="img-div">
  <img src="https://digitalsynopsis.com/wp-content/uploads/2017/06/beautiful-color-palettes-combinations-schemes-beautiful-blues.png" alt="A colour pallete running dark to light" id="image">
  <figcaption 
              id="img-caption"> 
    A blue colour scale running dark to light
  </figcaption> 
  </figure>
  </div>

For the error it reads


Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block' 

But as far as I’m aware, my display is in fact set as display: inline-block; which is what I assume it as asking me to do. Admittedly I’m probably missing something rather simple and I’m overlooking it.

Read the error message again. It says;

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.  
Use the "display" style property with a value of "block" for responsive images.: expected 'inline-block' to equal 'block'  
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'inline-block' to equal 'block'

So what you have is not the same.
Yes, there are a lot of ways to make the image responsive but it’s hard to write a test for each one so FCC chose one way to check. That’s what you need to meet.

I finally managed to figure it out, thank you! I was looking too specific into it and I was overlooking basics. I now have a nice green tick mark and I can move onto my next challenge!

@Sachlight, make sure you save after making changes. I’m saying this because I see your page passing 9/10 user stories.

Even though you didn’t ask for it I’m going to give you some advice on your page;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • In addition to being used incorrectly in parts of your code, it’s not used correctly in other parts. If you want multiple paragraphs then use multiple paragraph elements.