# \[Solved\] Tribute Page - IMG not Resizing Responsibly

**URL:** <https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262>\
**Category:** I Built This\
**Created:** [January 12, 2021, 5:42pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262 "2021-01-12T17:42:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 5:42pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/1 "2021-01-12T17:42:42Z")

</div>

[My tribute page](https://codepen.io/hb-scope/pen/oNzPVBZ) 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.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 12, 2021, 6:24pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/2 "2021-01-12T18:24:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 6:26pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/3 "2021-01-12T18:26:23Z")

</div>

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

```auto
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

```

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 6:29pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/4 "2021-01-12T18:29:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 7:08pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/5 "2021-01-12T19:08:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 7:30pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/6 "2021-01-12T19:30:44Z")

</div>

Solved!

Through trial and error I found that putting

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

```

into here

```auto
#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.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 12, 2021, 10:05pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/7 "2021-01-12T22:05:14Z")

</div>

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.

> [@hbscope](#):
>
> Now, if anyone has any other tips on cleaning up my code, it would be very welcome

This

```auto
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](https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text). For a more thorough explanation read [Web Accessibility in Mind](https://webaim.org/techniques/hypertext/link_text).
  - “ **wikipedia entry** ” is not accessible

- and on a side note, dark blue text on a dark background does not give good contrast

> **[: The Line Break element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)**
>
> The HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 10:55pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/8 "2021-01-12T22:55:55Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 12, 2021, 11:01pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/9 "2021-01-12T23:01:01Z")

</div>

> [@hbscope](#):
>
> 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.

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.

> [@hbscope](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 12, 2021, 11:32pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/10 "2021-01-12T23:32:04Z")

</div>

Got it, fixed.

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

```auto
border: 10px solid ##9e0000;

```

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 12, 2021, 11:46pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/11 "2021-01-12T23:46:34Z")

</div>

> [@hbscope](#):
>
> `##9e0000`

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

---

<div class="post-metadata">

**Author:** ![hbscope](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbscope/32/199027_2.png) [@hbscope](https://forum.freecodecamp.org/u/hbscope)\
**Post date:** [January 13, 2021, 12:08am UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/12 "2021-01-13T00:08:33Z")

</div>

…how did I not see that?

Time to go to bed I guess.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 14, 2021, 12:08pm UTC](https://forum.freecodecamp.org/t/solved-tribute-page-img-not-resizing-responsibly/440262/13 "2021-07-14T12:08:36Z")

</div>

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