Missing 1 test on Tribute Page. img element height is set to auto but still failing

HTML-CSS
1

Issue Description

I had an old tribute page that I wanted to make pass all the new tests since the recent update, and I put all the IDs in and made the image responsively resize but it’s only passing 9/10 tests. It’s failing on the responsive image resizing. It says my img element style height should be set to auto, which it is, but the test still failes.

Browser Information

  • Browser Name, Version: Chrome 67.0.3396.87
  • Operating System: Windows 10
  • Mobile, Desktop, or Tablet: Desktop

Your Code / Link to Your Pen

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

AssertionError: Use the "height" style property with a value of "auto" forresponsive images.: expected '449px' to equal 'auto'

Screenshot

image

2

You can try adding !important to see if that helps…

3

Changing to height: auto !important; did not work. Still only passing 9/10 tests

4

So I think the reason this is happening is this code:

class="d-block mx-auto rounded"

As a test, I remove these classes , then I added display=block to your img style setting and now all the tests pass.
So my suggestion is to figure out what about the stylesheets you are inheriting that is causing the original error and overwrite that setting in your own stylesheet. May take some trial and error to figure it out.

5

Thank you! I did the somewhat lazy thing and removed the stylesheet and just did what I wanted in pure CSS. A little more lines but it is more readable anyway. Now it passes all the tests!

1 Like
6

No problem. Please close this help request by marking it as solved (mark one of the previous responses as the solution).