Tribute page test pass 9/10, image not responsive

How to pass the image responsive test? please help with the code. thanks in advance.

edit: sorry had to edit few times, since i dont know how to use this forum yet.

the result in the codepen.io link at bottom

Your code so far

	#main {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #DDD340; 
		box-sizing: border-box;
		}
		
	#title {
		width: 100%;
		height: auto;
		text-align: center;
		}
		
	.subtitle {
		font-size: 22px;
		}
	
	#img-div {
		background: #FFEF74;
		border: 2px solid #EB7E00;
		text-align: center;
		margin: 20px;
		padding: 5px;
		}
	
	#image {
		width: 100%;
		height: auto;
		margin: 2px;
		}
	
	#img-caption {
		font-size: 22px;
		margin: 20px;
		}
	
	#tribute-info {
		text-align: left;
		margin: 20px;
		}
	
	#tribute-link {
		background: #C74212;
		color: white;
		}
	
	</style>
</head>

<body id="main">

	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	
	<div id="title">
		<h1>DIDI KEMPOT</h1>
		<p class="subtitle">"GodFather of Broken Heart"</p>
	</div>
	
	<div id="img-div">
		<img id="image" src="https://akcdn.detik.net.id/visual/2019/11/01/8b6b7da7-dbf6-4b27-9078-bd6ccc0c95f1_169.jpeg?w=650" alt="Didi Kempot live performance">
		<p id="img-caption">Didi Kempot penyanyi dan pencipta lagu, yang mempopulerkan genre musik Campursari sebagian besar bertema "patah hati" semasa hidupnya.</p>
	</div>
**Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 8.0.0; SOV34) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Mobile Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:
https://codepen.io/sobadrdb/pen/wvKYZqP

1 Like

So the failing message 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'
You have width: 100%

When you correct that and run the tests it will fail in the same place with a different error message;
The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'

When you correct that it will fail in the same place with yet another error message;
The <img> element should be centered within its parent element.
Image is not centered: expected 9 to be close to 524 +/- 11
You have margin: 2px That won’t center. Maybe something like margin: auto would help center, right?

Clicking the red button to see the failing test(s) and reading the error message is crucial to resolving issues.

1 Like

i just try to set
#image {max-width: 100% ; margin: auto; }
but still coame up with error, back to suggest display block.

You need to add all three;

max-width: 100%;
display: block;
margin: auto;

That’s why I say, reading the error message is crucial. It says what the test is looking for and tells you how to correct it.

1 Like

thanks for your quick reply,
yes i did before to change the max-width after reading error.
i edited on my notepad++ triee it on my browser.
i tried display: inline;
maybe because im understanding wrong about that block expected.

and thanks for your solution. now i got that error read better understanding.

Hi my name is Andy I am legally blind and i am trying to understand this, here is my code:

css: 
<style>
* {background-color: red;} 
#main{
    display: center;
    background-color: red;
    color: white;
    text-align: center;
  }

h1 {
  font-family: impact;
  font-size: 50px;
  color: black;
   text-align: center;
  border: 3px solid white;
   font-family: impact;
  font-size: 50px;
  color: black;
}
h2 {
  font-family: impact;
  font-size: 25px;
  color: black;


 
}

    
    #image {
      width: 0;
      height; auto
      max-width; 100%,
      margin: auto;
    }
</style>

html:
<body  id="main" style="max-width: 900px">
     <h1 id="title" class="center"> Machel Montano</h1>
   <div id="img-div">
 <img id="image" class="responsive-img" 
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Machel_Montano_%28Reggae_Awards_2007%29.jpg/220px-Machel_Montano_%28Reggae_Awards_2007%29.jpg" </img>

 
       <h2 class="h2" id="img-caption"> Soca Singer Machel Montano Photo with a red Background </h2>
    </div> 
  </div> 

Any help would be greatly appreciated!

hi @djtriniboya90
welcome to the forum.
im sorry to interups, i know you were asking for the moderator Roma to reply .

but i just want to short brief to the codes that you wrote.

first, i believe there is no value of center for display property in css inside your #main id selector.

second, the properties inside your #image id selector shouldn’t have property of width : 0; as it would not showing any image. the three code lines that roma mentioned to have all in to pass the img test is this :

#image { 
   display: block;   /* default value for img  element is inline-block  */
   max-width: 100%;  /* to make sure it fits in the image container,  the #img-div container on your code */
   margin: auto;   /* to centering image as block level element inside the container, the #img-div container */
}

third, in your html, img element is self-closing tag, there is no need to use </img> . and beside that you forgot to close the img tag. in short it should be like this :

<img  id="image" src="your image source link" alt="image description">

that’s all i can tell, more than that you’ll need the expert to explains to you.
as im just a beginner.

happy coding

Beginner or expert don’t matter any help is appreciated ill tweak my code and see if it works thanks!

you’re welcome. sorry for my english, still learning thou.

This is what i have right now and its not passing.

 #img-div {
background-color: red;
margin: 10px;
padding: 10px;

}


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

.img {

  display: block;
  margin: auto;
  max-width: 100%;
  height: auto; 
  
}

hi @djtriniboya90

im sorry i can’t help you with, if only you can link your work on codepen here, maybe i can try to find the clue what the issue.

https://codepen.io/AndyMPCTech/pen/xxZOqWq
here is the link!

hi,

as i saw your css codes, it turn out it small mistake, typo on your closing bracket of p property.
just fix the closing bracket fom ) to }

that dosen’t sove my responsive image problem though

I watched a YouTube video and figured out what i was missing!
Thanks for your help!

edit : good for you,
just need to delete this post, as to minimize spoiler.

Thanks again for all your help!

the rules for your #image id are missing the closing graph bracket }