[Solved] Tribute Page - IMG not Resizing Responsibly

Project Feedback
#1

My tribute page still misses the Responisble Resizing on the Image according to the test, but I cant find out what Ive done wrong.
Ive been banging my head against this for a while now, having tried different approaches based on the source material and other solutions from the forum, but cant seem to figure it out.

My code is probably really messy due to this, so please bear with me.

#2

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.)

Note that when you correct this issue the same test may fail again but for a different reason. That’s why you always want to read more then just the first line.

#3

Oh I am well aware of that button, have clicked it many times today :sweat_smile:
Here is the output it gives me:

1. 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 'inline' to equal 'block'
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
    at Function.n.equal (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:320)
    at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:121359)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
    at i.g.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963)
    at N.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651
    at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45075)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45145
    at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44190)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:44961
#4

Oh wait, I actually just noticed its giving me display:block errors, when all this time it was about resizing the img element.

Weird thing is, I did previously add the display:block attribute, but that did not solve my problem.

1 Like
#5

Ok, I’ve tried inserting display: block; everywhere that has anything to do with the image, and it keeps giving me the same error.
I’ve also checked the reference material provided, and can’t find the img element containing this attribute anywhere.

Am I missing something obvious here?

#6

Solved!

Through trial and error I found that putting

   margin-left: auto;
   margin-right: auto;

into here

#image {
  max-width: 100%;
  border: 10px solid ##9e0000;
  border-radius: 2%;
  margin-left: auto;
  margin-right: auto;
}

fixed the problem.

Now, if anyone has any other tips on cleaning up my code, it would be very welcome, because I feel like I must’ve added some useless code that is already covered by other elements.

#7

Good job @hbscope. Just to reiterate about reading more than just the first line in the failing text. There is more than one way to make an image response but it would be hard to write tests for all of them so FCC picked one way.

This

margin-left: auto;
margin-right: auto;

could be written as margin: auto;

Some things to revisit with your page;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible
  • and on a side note, dark blue text on a dark background does not give good contrast
#8

Thank you very much.

  1. Cleaned up the margin code, thanks. I think I tried doing it this way earlier but somehow it didn’t center the image, just push it to the left. It works now though.

  2. I did take out the <br> lines shortly after posting; they were a short term solution I forgot to take out.

  3. I get what you mean, and will pay attention to it in future, but in this case it seems self explanatory to me what Wikipedia entry that would be.
    I did include ‘his’ for good measure though.

  4. This might be due differences in our monitors, because for me it shows up as a very dark gray background, with a light gray behind the list. Text is either in dark or light gray, depending on the background.

All in all, thank you very much for your input :slight_smile:

1 Like
#9

Someone navigating your page with a screen reader does not get every bit of text read to them. They will only hear “wikipedia entry” and with no other context it will make no sense. Peruse the links about accessibility.

Sorry, I mean the link. It’s a dark blue on a black background. That’s what doesn’t have good contrast. Your tribute info reads fine.

1 Like
#10

Got it, fixed.

One last thing I don’t understand: Why does the image not have a border?

border: 10px solid ##9e0000;
#11

Because this ##9e0000 is not the correct way to specify a hex color. See the typo? It’s incorrect in you media queries too.

#12

…how did I not see that?

Time to go to bed I guess.

1 Like