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! 
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="https://hbr.org/resources/images/article_assets/2016/03/R1605L_KELLY.jpg" alt="Isabel Allende photograph by Drew Kelly">
<div id="image-caption">Isabel Allended as photographed by Drew Kelly</div>
<a href="https://hbr.org/resources/images/article_assets/2016/03/R1605L_KELLY.jpg" target="_blank"></a>
</div>
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:
<style>
#image {
display: block;
max-width: none;
}
#main {
text-align: center;
}
a:hover {
color: blue;
}
</style>
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?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.