Tell us what’s happening:
I am trying to make my image responsive in width relative to its parent in the way I learnt in the challenge about image responsiveness, but it won’t work. Your code so far
<!DOCTYPE html>
<html>
<head>
<meta charset= utf-8>
<title id="title"> My Parents </title>
</head>
<body>
<main id=main>
<div id="img-div">
<figure>
<img id="image" src="https://images-na.ssl-images-amazon.com/images/I/61De6r9JAEL._AC_SX522_.jpg" alt="I love my Parents">
<figcaption id="img-caption">I love my mom and dad!</figcaption>
</figure>
</div>
<p id="tribute-info"> Throughout my whole life my parents have supported me and backed me up everytime I needed it. Throughout my almost 15 years of life they have never given up on me regardless of how many times I mess up, and that is a debt I can never repay. Whatever I needed was provided, and so was everything I wanted for that matter.</p>
<a id="tribute-link" href="https://www.familylives.org.uk/advice/primary/learning-school/supporting-your-child-at-school/" target=_blank> Click here to find out what parental support can help with.</a>
<style>
#img-div {
position: absolute;
justify-content: center;
}
figure {
justify-content: center;
}
#image {
width: 100%;
height: auto;
justify-self: center;
}
#img-caption {
position: relative;
top: 500px;
left: 200px;
color: black;
}
#tribute-info {
position: relative;
top: 500px;
left: 50px;
}
a {
position: relative;
left: 50px;
top: 500px;
}
body {
justify-content: flex-start;
}
</style>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
<!DOCTYPE html>
<html>
<head>
<meta charset= utf-8>
<title id="title"> My Parents </title>
</head>
<body>
<main id=main>
<div id="img-div">
<figure>
<img id="image" src="https://images-na.ssl-images-amazon.com/images/I/61De6r9JAEL._AC_SX522_.jpg" alt="I love my Parents">
<figcaption id="img-caption">I love my mom and dad!</figcaption>
</figure>
</div>
<p id="tribute-info"> Throughout my whole life my parents have supported me and backed me up everytime I needed it. Throughout my almost 15 years of life they have never given up on me regardless of how many times I mess up, and that is a debt I can never repay. Whatever I needed was provided, and so was everything I wanted for that matter.</p>
<a id="tribute-link" href="https://www.familylives.org.uk/advice/primary/learning-school/supporting-your-child-at-school/" target=_blank> Click here to find out what parental support can help with.</a>
<style>
#img-div {
display: flex;
position: absolute;
justify-content: center;
}
figure {
justify-content: center;
}
#image {
max-width: 100%;
height: auto;
justify-self: center;
}
#img-caption {
display: flex;
position: relative;
top: 500px;
left: 200px;
color: black;
}
#tribute-info {
display: flex;
position: relative;
top: 500px;
left: 50px;
}
a {
display: flex;
position: relative;
left: 50px;
top: 500px;
}
body {
display: flex;
justify-content: flex-start;
}
</style>
</main>
</body>
</html>
<!--This is what it tells me to do but it doesn't tell me that I'm right when I do it, instead it tells me that another task is now wrong-->
I just tried it, it worked but it made the “center the image inside of its parent” challenge wrong.
P.S. I’m sorry I’m taking a lot of your time but I really am not able to do it using all my notes and knowledge and google.
User Story #1: My tribute page should have an element with a corresponding id="main" , which contains all other elements.
User Story #2: I should see an element with a corresponding id="title" , which contains a string (i.e. text) that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”).
User Story #3: I should see a div element with a corresponding id="img-div" .
User Story #4: Within the img-div element, I should see an img element with a corresponding id="image" .
User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .
User Story #6: I should see an element with a corresponding id="tribute-info" , which contains textual content describing the subject of the tribute page.
User Story #7: I should see an a element with a corresponding id="tribute-link" , which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank" ).
User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
User Story #9: The img element should be centered within its parent element.
Number 9 is the one
When I did what you told me to do it passed the "make the image responsive in relation to its parent element. But it made the “center the image within its parent element” fail, although it was passed before
