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.
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!
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>
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ā¦!
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?
You would be starting to look like an expert to me, after with much much pleasure
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.