# How to test my pen tribute page

**URL:** <https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138>\
**Category:** I Built This\
**Created:** [March 11, 2019, 11:00am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138 "2019-03-11T11:00:33Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 11, 2019, 11:00am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/1 "2019-03-11T11:00:33Z")

</div>

Thanks !!  
I have only 8/ 10

I think I miss them:

- **User Story #8:** The `img` element should responsively resize, relative to the width of its parent element, without exceeding its original size.
- **User Story #9:** The `img` element should be centered within its parent element.

no idea ?

---

<div class="post-metadata">

**Author:** ![meow414](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/meow414/32/111944_2.png) [@meow414](https://forum.freecodecamp.org/u/meow414)\
**Post date:** [March 11, 2019, 11:02am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/2 "2019-03-11T11:02:38Z")

</div>

you need to include  
`<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`

at top of your HTML code and then you will see at top left a menu in green. Click it and choose Tribute page and run tests

---

<div class="post-metadata">

**Author:** ![chuckadams](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chuckadams/32/109651_2.png) [@chuckadams](https://forum.freecodecamp.org/u/chuckadams)\
**Post date:** [March 11, 2019, 11:11am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/3 "2019-03-11T11:11:10Z")

</div>

Please include a link to the page so we can tell what’s wrong with it.

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 11, 2019, 12:53pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/4 "2019-03-11T12:53:43Z")

</div>

they say here i can’t use links in my use of the forum yet !!

Please come see my dashboard. my profile is @JC92

---

<div class="post-metadata">

**Author:** ![AE448](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ae448/32/107258_2.png) [@AE448](https://forum.freecodecamp.org/u/AE448)\
**Post date:** [March 11, 2019, 2:26pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/5 "2019-03-11T14:26:18Z")

</div>

Here is a link to my fork:

> **[A Tribute Page Exercise](https://codepen.io/AE448/pen/VRzNZg)**
>
> ...

See what i’ve changed with #image and #img-div. I used text-align: center and margin: 0 auto in the asterisk selector at the top of the page, which means it applies to everything on the page. This just centered all your content, including the image in question. However, to center something you must define it’s width within it’s parent.

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 11, 2019, 4:09pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/6 "2019-03-11T16:09:58Z")

</div>

thank you very much, that was helpful

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 18, 2019, 3:45pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/7 "2019-03-18T15:45:43Z")

</div>

i still can’t pass the tests, what’s wrong ?§ 😮

> **[A Tribute Page Exercise](https://codepen.io/JC92/pen/rRjYrR)**
>
> ...

thank u sooooo much for your response 🙂

---

<div class="post-metadata">

**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\
**Post date:** [March 18, 2019, 4:15pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/8 "2019-03-18T16:15:02Z")

</div>

for the anchor element just give it a id tag like this

```auto
id="tribute-link"

```

your current anchor tag is not closed btw.

as for the img tag you need to add

```auto
max-width:your amount here;
// btw this cannot equal none you have to set it to a value
// em px or % whatever works for you

```

Simply reading you errors can solve most of these problems.  
Just take your time and read through them. The errors have detailed responses for a reason.  
Other than that, looks pretty good!

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 18, 2019, 4:27pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/9 "2019-03-18T16:27:52Z")

</div>

You think I should read more solved errors on the forum ?

I am still confused after your answer:

when i check the anchor is closed and looks fine .  
… max-width changes make the whole picture changing in appearance…

---

<div class="post-metadata">

**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\
**Post date:** [March 20, 2019, 5:02pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/10 "2019-03-20T17:02:42Z")

</div>

Hi again! So one quick tip reply to me directly so I will get notified.  
aka hitting the reply button on my response.  
As for reading errors I meant in the test suite console. The test suite is telling you  
what it expects and what you are giving it. #7 says it wants a `<a>` tag with the id=“tribute-link”  
so that solves test case 7. as for #1 in responsive section it says the img should responsively resize. reading futher

Use the “height” style property with a value of “auto” for responsive images.: **expected ‘100%’ to equal ‘auto’** etc… etc…

SO, it wants the height style property to equal auto not 100%. thus if you change that it will pass  
the test case.

Also this section is **not** closed. you can tell because in code pen the tags are green instead of red.

```auto
<figure> <figcaption>
<a href="https://www.wikiart.org/en/paul-klee target=">Please click the picture to obtain more details</figcaption>  
<a id="tribute-link" href="https://www.wikiart.org/en/paul-klee target="_blank">
<img src="https://monoskop.org/images/thumb/4/4d/Paul_Klee_Munich_1911.jpg/250px-Paul_Klee_Munich_1911.jpg" alt="paul klee">
</figure>

```

specifically this section **vvvvv**

```auto
<img src="https://monoskop.org/images/thumb/4/4d/Paul_Klee_Munich_1911.jpg/250px-Paul_Klee_Munich_1911.jpg" alt="paul klee"> 
        </figure>

```

the problem is that u are missing a " in your code so it thinks everything after that is in quotes.  
also doing `<a id="memes"> your text here</a>` is a good habit even if they are self closing tags.

here is a forked version of your project that passes all test cases please don’t use this as a crutch  
try to fix your own code. Note it is not styled the same but I leave that up to you.

> **[A Tribute Page Exercise](https://codepen.io/bmansk14/pen/drgNGV?editors=1100)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 21, 2019, 9:14am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/11 "2019-03-21T09:14:43Z")

</div>

this is kinda interesting…! ☀  
Thank you very much. I hit the button “test” with full 100% success now. The solution was so short I have to say, so thankful you were there to help. 😄

This is so my lastly done project on “Tribute page”.

You saw : I wanted to create my last small photo to be the tribute link of the exercise

Unfortunately, the “block” attribute is so far, a full widthed screen block, not the photo size.  
Do you know which attribute, would have given me a small, picture-sized block. for the photo?

> **[A Tribute Page Exercise](https://codepen.io/JC92/pen/rRjYrR)**
>
> ...

You would be starting to look like an expert to me, after 😉 with much much pleasure

---

<div class="post-metadata">

**Author:** ![Jc92](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jc92/32/109288_2.png) [@Jc92](https://forum.freecodecamp.org/u/Jc92)\
**Post date:** [March 21, 2019, 9:18am UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/12 "2019-03-21T09:18:02Z")

</div>

btw even when i change the display to “auto”, the hover is still possible over the all width of the screen !!

---

<div class="post-metadata">

**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\
**Post date:** [March 21, 2019, 4:23pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/13 "2019-03-21T16:23:10Z")

</div>

Hi again!  
so I have got you covered.

```auto
#tribute-link{
  height:100px;
  display:block;
  width:25px;
  margin:auto;
}

```

the above goes in your css and below goes in the html section

```auto
<a id="tribute-link" href="https://www.wikiart.org/en/paul-klee" target="_blank">
      <img src="https://monoskop.org/images/thumb/4/4d/Paul_Klee_Munich_1911.jpg/250px-Paul_Klee_Munich_1911.jpg" alt="paul klee">
    </a>

```

Nest your elements like this and boom done. So to explain what is going on.  
The height says how tall you want your anchor tag to be and width obviously says how wide.  
Margin auto centers it. Basically think about it this way, the anchor tag is what takes you to a  
web page via the href. The photo sits under that anchor tag. The photo is independent of the  
anchor tag unless you nest them. Once you do that the anchor tag still has it’s own dimensions.  
It’s up to you to specify the size and width of the anchor tag.

Once again happy to help and congrats on completing the challenge!!  
p.s i’m no expert just trying to lend a helping hand with what I know.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 1:54pm UTC](https://forum.freecodecamp.org/t/how-to-test-my-pen-tribute-page/264138/14 "2021-02-06T13:54:05Z")

</div>

Closed on February 6, 2021, 1:54pm UTC