Help with this error?

Ok, thank you. Initially when I was typing in the CSS section it was not having any effect but I have moved it over.
Re: using display and block: when I use this I get a different error that says use max-width with none, when I use max-width with none I continue to get the same error.

That is because you are misunderstanding the error message.

You are not supposed to assign none to the max-width property.
You need to assign either a percentage to the max-width value.

Also, you will need to delete the style tags and just keep the css in the css section.
Hope that helps! :grinning:

Ok, I cannot seem to figure this out. There are two problems that keep coming up. I’m reposting this as I may now be getting confused by people adding comments on my last post regarding things I’ve already resolved.
I (think I am) following the directions given in the error but when I retest I either get the same error with the same instructions again OR I get the same error with different instructions.
The error that I can’t seem to get rid of has to do with the img size. It gives me two different instructions depending on how I change the CSS but it is never resolved by me altering the CSS as instructed.
The other error is for figcaption/image-caption. I thought I had that resolved but then somehow it came back and I tried a million things and it won’t go away and I don’t remember how I had it before that made it finally pass the test and I don’t know why it started showing that error again, but here I am.

Two things:

  • Check the id on the caption div. It is not quite the same as what the tests are asking for.
  • You have no CSS on the image right now. You need to use CSS to make it responsive.

@Codemiester, I’m going to have to disagree with you a little here. The image responsiveness solution should probably not use view port units based on the requirements for this particular challenge.

1 Like

I see two failing tests:

Within the “img-div” element, I should see either a or

element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.

expected null to not equal null AssertionError: expected null to not equal null

(You can see the test report by pressing on the red “8/10 Passed” thing.

When I look at the relevant code:

    <div id="img-div">
      <img id="image" src="" alt="Isabel Allende photograph by Drew Kelly">
      <div id="image-caption">Isabel Allended as photographed by Drew Kelly</div>
      <a href="" target="_blank"></a>

I agree with the test - you didn’t meet the criteria. Take a look at your ids.

The next failing test says:

The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’ AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

That tells you what the issue is. This is your CSS pane:

    #image {
      display: block; 
      max-width: none;
    #main {
      text-align: center;
    a:hover {
      color: blue;

First of all, get rid of those <style> tags - that’s HTML and it doesn’t belong in codepen’s CSS pane. (CSS does things a little differently.)

Next, read the test report - it tells you what the problem is. Once you fix that, it will complain about centering - you can fix that too.

Once I fix those things, I get 10/10 for your code.

Re: max-width (using a percentage or px or em as the value) yes, I’d done that before and was still getting this error. I’ve changed it again to max-width: 100%; and am still getting the error. I added in the property and value width: 500px; and still got the error. I’ve tried quite a few things, actually, and not necessarily shared each and every attempt here -but still consistently get this error.

Re: style tags, thanks.

Have you tried giving a fixed width to the max-width property and a percentage to the width property like this?