Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here. I am trying to do the last two steps but have tried everything for the following specifications and it is still failing the test. Can someone help me on the following:

    • Failed: Your img element should have a display of block.

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

      Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang='en'>
 <head>
 <meta charset='UTF-8'/>
 <meta name='viewport' content='width=device0width, initial-scale=1.0'/>
 <title>FCC Tribute Page</title>
 <link rel='stylesheet' href='layout.CSS'/>
 </head>
 <main id='main'>
<div id='main'>
 <h1 id='title'>THE MINIONS</h1>
 <div id='img-div'>
   <a id='tribute-link' href='#' target='_blank'/>
   <img alt='Buzzlightyear' src='https://i.guim.co.uk/img/media/3f30a239d6ff96145ee66e0dfb075dd54ad26d95/639_0_2645_1588/master/2645.jpg?width=1200&quality=85&auto=format&fit=max&s=e2f6f213fc781bb08cb800be405b04c9' id='image'/>
   <figcaption id='img-caption'>The Minions meeting Gru for the first time. </figcaption>
 </div>

<p><div id='tribute-info'>
  <b> Facts about the Minions</b>
  <ul>
   <li>Minions have 3 fingers in each hand.</li>
   <li>They survive through any adversity; from snowy to sunny climates to even outer space</li>
   <li>The Minions speak Minionese, a combination of multiple languages like Spanish, Italian,French,Russian and Korean Chinese; sometimes even gibberish</li>
  </ul>
</div>
</div>
</main>
 </html>

/* file: styles.css */
image {
   max-width: 100%;
   display: block;
   height: auto;
   margin: 0 auto;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

The selector here is a bit wrong, if you want to select an element by its id, you need to add a hashtag in the beginning. so your selector should be set to #image, not image.

3

I am having difficulty centering the image. Every other thing is okay. I can’t seem to find the property that centers the image.

4

i tried that and it didnt work

5

The site sometimes has trouble checking your code for one thing if there’s an error in your code for another thing that comes before it. I can see such an error in your HTML, so I’d suggest double-checking that.

6

where about’s?? Cuz I have tried this exercise multiple times where I redid it and everything appears okay apart from these 2 steps

7

Take a look at your anchor element and ask yourself: what exactly is it telling the user’s browser to do? What are anchor elements supposed to do? What’s the purpose of them? And how do you use them to accomplish that purpose?

9

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