How to test my pen tribute page

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 ?

1 Like

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

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

they say here i canā€™t use links in my use of the forum yet !!

Please come see my dashboard. my profile is @JC92

Here is a link to my fork:

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.

thank you very much, that was helpful

i still canā€™t pass the tests, whatā€™s wrong ?Ā§ :open_mouth:

thank u sooooo much for your response :slight_smile:

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

id="tribute-link"

your current anchor tag is not closed btw.

as for the img tag you need to add

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!

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ā€¦

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.

<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

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

this is kinda interestingā€¦! :sunny:
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. :smile:

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?

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

btw even when i change the display to ā€œautoā€, the hover is still possible over the all width of the screen !!

Hi again!
so I have got you covered.

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

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

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