Test not passed while everything is ok!

HTML-CSS
1

Tell us what’s happening:
I made another Tribute project page with the simplest design to avoid bugs but still getting 9/10 while everything is 10000% ok and the page is 100% responsive. Someone tell me where is my mistake if there is any!
PS: I am using w3css because its 100 times faster and easier especially for responsiveness and it has nothing to do with the strange test pass result 9/10.
Thank you very much

Your code so far
https://codepen.io/i-tech/pen/mdeWpVj

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36 Edg/81.0.416.64.

Challenge: Build a Tribute Page

Link to the challenge:

2

if you read below the failing test it says why it is failing.

Also, stuff to know about using codepen:

  • in the HTML box goes only what goes inside the body tags
  • in the CSS box goes only what goes inside the style tags
  • everything else can be added in the pen settings

if you want to not have the boilerplate, you can use a different service, like repl.it

1 Like
3

The part you aren’t doing is “without exceeding it’s original size”.

1 Like
4

Thank you for taking the time to explain. Although it is not telling me why it is failing.

5

image
image1419×427 35.8 KB

It even shows you exactly what the test is looking at (I know that you can’t understand it all yet, but it can still be helpful.)

1 Like
6

below the failed user story it is saying why it is failing. See the blue arrow that point out that.

image
image777×210 17.6 KB

1 Like
7

Thank you for taking the time to reply. I set the image to max-width: 100%, is this not enough to not let the image exceeds its original size. I am a beginner so please be kind an explain more.

8

That would still allow the image to be “stretched” larger than its original size.
You only want the img to get as big as the original image.

Hint: The image you are using is 800px wide.

1 Like
9

note that there may be more than one issue for one test not passing, you can go back to the test to see if the error message changed or it is still the same issue

1 Like
10

I am not convinced because The image is responsively resized relatively to the width of its parent and to all screens, The page as well. I tested it on google dev simulator on all screens. If the entire page is responsive, why it still rising a mistake? That’s the point I mean and that’s what I am instructed to learn, sounds logic right? Well, I am gonna delete the image container so the image parent will be the body. That’s what my mind tells me to do.

11

The test is telling you what you need to do.

Use the “display” style property with a value of “block” for responsive images

So do that, add display: block to the image.

1 Like
12

I didn’t say it wasn’t responsive. I said it gets too big. It should not be allowed to get larger than the image itself. You don’t want it to grow infinitely because it will look like crap.

1 Like
13

What I thought was 100% correct!! I deleted the image container, now test result is 10/10. Thank you for your support.

14

As I said, the image container was bugging the test script, after deleting it, and giving its style to the image, now the test result is 10/10. Thank you for your support.

15

You could have just added max-width: 800px to #image.

1 Like