Tribute Page - Build a Tribute Page

HTML-CSS
#1

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:

#2

Could you post your html codes as well?

#3

there you go…html code of that part

#4

That is your full html code?

#5

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

#6

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

#7

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>
#8

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

#9

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
#10

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