Tribute page test pass 9/10, image not responsive

1

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

2 Likes
2

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
3

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

4

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.

2 Likes
5

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.

6

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!

7

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

8

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

9

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

11

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; 
  
}
12

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.

14

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

15

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 }

16

that dosen’t sove my responsive image problem though

17

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

18

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

19

Thanks again for all your help!

20

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