Tribute page pic, error but picture is responsive?

Code Feedback
1

https://codepen.io/ramziosta/pen/qBRWGYR

My picture is responsive but I keep getting an error? what do I need to do?

2

@ramziosta, 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 ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
3

You’ve given your image max-width: none. That is the opposite of responsive. If your image is 800px wide, and you open the page on a smartphone with a screen width of 360px, the image would still be 800px wide, completely messing up the layout. Instead, you want to go for 100%. That means that the image is never wider than the screen.

After fixing that, you still won’t pass, but as Roma said, the error message will tell you what’s wrong.

4

even if I remove the max width it doesnt validate, and my pic is responsive. The validator tells me to add the max width option

5

Yes you do need max-width. Just don’t set it to none.

6

there is no other errors beside this:

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

and my image does all that?

7

@ramziosta , the full error message reads;

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 'flex' to equal 'block' 
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'flex' to equal 'block'

EDIT: Yes, your image does look responsive but the test has only been written one way. There is more than one way to make an image responsive but writing a test suite to cover all isn’t/wasn’t feasible. That’s why it’s important to read all of the failing error message. Not just the first line.

8

I am assuming I have to figure out a different way to make it responsive

9

Not really, just follow the instruction in the error message. It tells you exactly what to change.
Have you tried doing that?

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.