Tribute page - stuck with the img responsive

Tell us what’s happening:
Ok i have been doing great so far, i have 9/10 on the test result with the " img element should responsively resize, relative to the width of its parent element, without exceeding its original size." one being wrong.

I checked the lessons back again because i knew i saw a lesson about responsive images in the responsive web principles, i used what have been taught there and still got an error, i dont know what to do, i even used ‘display:flex’ to try something else like ‘flex-shrink’ but still got the error, i even used media queries to shrink the Div (container) parent when the width of my browser goes small but even when i do that and the img shrinks too, i, still got the error… hope that i can get some help.

(P.D: Have not digged too much on design since the objectives are not accomplished and not a native english person, so, sorry if bad english there)

Your code so far

Steve Jobs tribute

The old king of Apple, you may rest in peace Steve.

<div id="separador-linea">  


<div id="tribute-info">
  <p> say something</p>

Visit this amazing Wikipedia link to learn more about or good boy Jobs


#img-div {
width: 1150px;
height: 750px;
box-shadow: 0 10px 20px rgba(0,0,0,0.23);
margin: 50px 50px 50px 50px;
border-radius: 25%;
display: flex;

#image {
margin: 50px 0 0 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.80);
align-self: center;
max-width: 100%;
height: auto;
border-radius: 25px;
flex: 0 2 1100px;

#img-caption {
text-align: center;
margin: 10px 0 0 0;
.color {
background-color: #dcdcdc;

#title {
box-shadow: 0 10px 20px rgba(0,0,0,0.20);
background-color: #A1A1A1;
border-radius: 25px;
text-align: center;
font-family: bold;

#tribute-info {
font-size: 18;
text-align: center;

font-size: 14px;
font-color: black;
font-family: monospace;
margin-left: 100px;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:79.0) Gecko/20100101 Firefox/79.0.

Challenge: Build a Tribute Page

Link to the challenge:

What I did was set change the image to a block element, and set the margin to auto, plus max-width of 100%.

1 Like

I guess i did not understand fully, i changed the img margin from the image inside the container to auto, and already had a max-width of a 100% and a height of auto, still 9/10 :S.

Am i trying wrong by focusing on the img and not the cointainer?

Did you change the image to a block element? e.g display: block;

1 Like

That was what i needed, thank you so much for your time, you are the best.

1 Like