Help with my tribute page! The img element should responsively resize

HTML-CSS
1

my code : https://codepen.io/jozzo/pen/dyVYQWP
task : https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

i did my best but it always showing me ‘’ The img element should responsively resize, relative to the width of its parent element, without exceeding its original size. ‘’

code :
#img-div {
background-color: #a9dce3;
width: 96%;
max-width:96%;
margin-left:2%;
margin-right: 2%;
border-radius: 25px;
grid-template-columns: 1fr;
grid-template-rows: 600px;
}
#image{
border-radius: 5px;
max-width:100%;
height: auto;
margin-top: 60px;
border-radius: 25px;
}

2

What’s most important from the error message is the first line in the stack error (the box). Follow the hints. I did follow the hints and it only took me 3 steps to make it pass the spec. “Expected x to equal y” => x is what you have, y is what the spec wants.

3

i spent alot of time just in this specific rule . if you can give me another hint i will do appreciate it .

4

done 10/10
i used this method : html - Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size - Stack Overflow

display: block;
margin-left: auto;
margin-right: auto;
5

but can you plz explain what you were talking about ?

6

If you revert back, the first line of the stack error messages asked you to do:
set img element display to block instead of inline
expecting img height 80% to equal auto
expecting img width to equal auto
Not all at once, they popped up one after another once we did what it wanted.
And what you did with that stackoverflow reference do what it wanted, in a way.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.