Tribute Page nearly finished

HTML-CSS
1

It’s so close to finished, I just need to get past " 1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size."

I tried adding max-width to the CSS, but it didn’t work. I looked at this page and my old one side-by-side, and it still didn’t work.

2

Hi,
You have styled an element with id of img. Do you have an element with the id of img?


#img{
  display: box;
  max-width: 100%;
  max-height: auto;
}
3

No. But when I try to change

<img id="image" src="https://github.com/Jekyll20/Main/blob/master/Heart%20(Tribute).png?raw=true" alt="Rainbow heart">

to

<img id="img" src="https://github.com/Jekyll20/Main/blob/master/Heart%20(Tribute).png?raw=true" alt="Rainbow heart">

and change

#image{
  display: box;
  max-width: 100%;
  max-height: auto;

to

#img{
  display: box;
  max-width: 100%;
  max-height: auto;

It causes me to lose two user stories. It changes from 9/10 tests completed to 7/10.

1 Like
4

It should be like:

#image{
  display: block;
  max-width: 100%;
  height: auto;
}

These is no property box for display

5

# indicates an id attribute. You don’t have an element with id=‘img’ so that second style will not match any elements.

You do have an img element with id=“image” though

The first style does successfully match your image, but you still have an error that is failing the same user story.

Look closely at your display property. Is that a valid value for display?

This is the error message from the failed assertion test

Use the “display” style property with a value of “block” forresponsive images.: expected ‘inline’ to equal ‘block’
AssertionError: Use the “display” style property with a value of “block” forresponsive images.: expected ‘inline’ to equal ‘block’

6

OK…OK, it’s finally working.

7

What did you do to get it work?

my example https://codepen.io/dominick_designs_websites/pen/OBYJeG?editors=1100

is getting an error regarding the Layout # 2. The element should be centered within its parent element.

The error says: “Image is not centered: expected 0 to be close to 1597 +/- 11”

I have

 display= block;
  height= auto;
  max-width = 100%;

applied to #image but it is not working

8

To be honest, you’re talking to the wrong person. I don’t even remember entirely what I did. If I remember, I’ll tell you.