Tribute Page Challenge - User Stories 8 and 9

HTML-CSS
#1

For some background, user story #8 is making the image resize to its parent element, and user story #9 is centering the image within its parent element.

I couldn’t remember what code makes this possible, and after spending days searching for the lesson that covered these topics, I still don’t know what to do.
The rest of the user stories tested fine.
Please reply soon.

Your code so far
Code Pen Tribute Page

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

#2

READ ME
Before anyone replies to this please know that I did not understand the read_search_ask method until just now. I am very sorry for wasting peoples time. :slightly_frowning_face:
I have tried it now, but am still having trouble sooo. :neutral_face:

#3
Forum Search

_20200530_062420
_20200530_0624201076×1517 138 KB

#4

@Crow, when any of the tests fail you can click on the red button and to see what test(s) failed and read the failing error message.
The first failing test says;

Within the "img-div" element, I should see either a `<figcaption>` or `<div>` element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".

expected null to not equal null

Looking at your code, you do not have that id. Close, but not what the test is looking for.

The second failing test says;

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the "max-width" style property : expected 'none' to not equal 'none' AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Looking at your code you’ve styled an id of img but there’s no place in your code where you set an id of img. Maybe in CSS remove the id and just style the element.

#5

Then I must be really dull, because I read the (vague to me) instructions given, thought that I have followed it to the letter, but it doesn’t work. I even looked at their example, and my code is the exact same as theirs, yet the test comes up wrong for me and right for them.
Also, it won’t accept the max-width element. I’ve tried it multiple times, even directly copying from the example, and it still won’t work.

#6

You’re not reading what I wrote.

This is what you have <figcaption id="image-caption">
Again, this is what the code is looking for;
with a corresponding id="img-caption"
change yours to “img-caption”

And again, you are styling an id of img…in CSS you have ;

#img {
  max-width: 1200px;
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

but your HTML code is;
<img id="image" src="https://miro.medium.com/max/1200/1*gH4YEZLDwqkDyJ2YngAl5w.jpeg" alt="Winston Churchill peace sign">

img is not #img (delete the # sign in CSS)

#7

Thanks for being patient with me. I fixed the id=“img-caption” and I found the other problem. I spelled width wrong. :laughing: Instead of “width”, I had written “wdith”.
There were also a few other times where I spelled out the entirety of the word image when I should have written img. These have all been corrected, and I passed all the tests. I am very sorry if I have wasted your time.
Thank you so much. :smile:
Have a wonderful Sunday and God bless.

Crow

1 Like
#8

You didn’t waste my time. I’m happy to help and you’ve learned something so it was good for both of us.
You need to run your code through the validator again. There are a couple of errors you need to clean up such as open elements.
Also, there is no such HTML element as ul2. The only elements that have numbers are the header elements h1 - h6. Take a look at the HTML Elements Reference.

Some additional thoughts;