Building a tribute page project challenge

HTML-CSS
#1

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.

Challenge: Build a Tribute Page

Link to the challenge:

#2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#3

Hi @Bashar3 !

When you open up the test suit and read the full error message it will tell exactly how to fix the problem for the image. :grinning:

Also, you are using flex properties but you don’t actual use display:flex;. So you should add that to your code.

1 Like
#4

it told me to use the max width property but it isn’t working

#5 
<!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-->
#6

Error message:
Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

When I fix that the test passes

1 Like
#7

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.

#8

Can I see the challenge you are referring to?

We are here to help :grinning:

1 Like
#9

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

#10

I guess I am little confused by what you meant here

#11

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

#12

Ahh I see.

I forgot that when I tested it I added in the margin property to center the image.

When you set it to block then you need to center it with margin:0 auto;

1 Like
#13

I just tried it, it WORKED! Thank you so much!!!

1 Like