Responsive Web Design Projects - Build a Tribute Page

HTML-CSS
1

**I am stuck on the following instructions: *#image should have a max-width of 100%… #image should be centered within its parent.

  • Waiting:Your #image should have a height of auto 
<!-- file: index.html -->
index.html
<!DOCTYPE>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>tribute page</title>
    </head>
    <body>
      <header>
        <h1 id="title">DR. Kosh Tribute Page<h1>
      </header>
      <main id="main">
        <div id="img-div">
          <img id="image" src="yourchoice.com" alt"Your img description"></img>
          <h2 id="img-caption">img caption description </h2>
          <h3 id="tribute-info">img subject </h3>
          <a id="tribute-link" href="" target="_blank"></a>
          
        </div>

      </main>
    </body>
    
    </html>

    

/* file: styles.css */
img{
 display: block;
 text-align: center;
 max-width: 100%;
 margin: auto
 

}

#image {
   
   margin: auto;
   
   
}

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

2

I’ve edited your code 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 (').

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.