Tribute Page - Build a Tribute Page

I have done exactly what was needed to run the test cases for img element and #image , yet it is showing that the test cases are not satisfied:
the cases include:

  • Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Failed:Your #image should have a height of auto.

  • Failed:Your #image should be centered within its parent.

can someone plz help me out with this?
Your code so far

*{
    box-sizing: border-box;
}
main{
    background-color: rgb(229, 227, 227);

}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    color: #333;
    margin-top: 0;
    padding:25px 5px;
}
#title{
    
   
    text-transform: uppercase;
    font-size:50px;
    padding-top:5px;
    padding-bottom: 0;
    font-weight:600;
    margin-bottom: 0;
}
#quote{
    text-align: center;
    font-weight: normal;
    font-size: large;
}
#img-div{
  
    
    margin: 15px;
    background-color: white;
    padding-top:100px;
    padding-left:20px;
    padding-right: 20px;
    padding-bottom: 10px;
}
#image{
    max-width:100%;
    height: auto;
    margin:0 auto;
} 
img {
display: block;
}
   
#content{
    font-size: large;
    text-align: start;
    padding-left: 25%;
    
}
footer{
    text-align: center;
    font-size: 25px;
    padding-bottom: 5px;
}
#image{
    max-width:100%;
    height: auto;
    margin:0 auto;
} 
img {
display: block;
}

html part of the code:

<section>
        <h1 id="title">Mahatma Gandhi</h1>
        <h2 id="quote"><i>leader of the nationalist movement against the British rule of India</i></h2>
    </section>
        <div id="img-div">
            
            <img src="https://images.indianexpress.com/2022/11/gandhi_1200_express-archives.jpg?resize=450,250" id="image" width="1200px" height="700px" >
            <div id="img-caption">
            <p  >(on the right) Mahatma Gandhi and Jawarhalal Nehru</p>
        
        </div>
        </div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Could you post your html codes as well?

there you go…html code of that part

That is your full html code?

where is your link element?
(the link element is what links the index.html to the styles.css)

No , its just that part of the code where I have the img tag and #image , the rest of the code basically have the content of the page that’s why I didn’t add it

It is there within the head tag , here:

<title>Tribute Page</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main id="main">
        <section>
        <h1 id="title">Mahatma Gandhi</h1>
        <h2 id="quote"><i>leader of the nationalist movement against the British rule of India</i></h2>
    </section>
        <div id="img-div">
            
            <img src="https://images.indianexpress.com/2022/11/gandhi_1200_express-archives.jpg?resize=450,250" id="image" width="1200px" height="700px" >
            <div id="img-caption">
            <p  >(on the right) Mahatma Gandhi and Jawarhalal Nehru</p>
        
        </div>
        </div>
        <h2 id="tribute-info">The timeline of Gandhi's life :</h2>

Please show us all the code in one shot.
So far you are just showing us snippets of code.

Never mind lol , I have figured it out , thank you for the reply though , It just made me realize that I did the coding in another IDE with a different .CSS file , I changed it just now to styles.css and it worked!

1 Like

Also try fixing your link element to what the project said it should be:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

1 Like