Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here. Hey I’m having issues with 2 of the tasks.

  • Your img element should have a display of block.

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

I have tried following multiple videos, using different selectors i.e #image or #img or even img-div but im not sure why I cant do these two tasks. Ive been working on this certificiate/project for a while now and I just don’t know what to do to fix my code and complete these tasks.

   **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 {
  width: 500px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

img {
  display: block;
}
   **Your browser information:**

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

  1. The name of the CSS file in the editor is styles.css not layout.CSS

  2. There is no image element selector. It is either img for the element type or #image for the id.

thanks for spotting the wrong CSS file name, but as for the image selector if I change it from image to #image it still doesn’t satisfy those 2 tasks. I had used the img element to do the display of block and that still doesn’t work

I would need to see your latest code, but it works for me.

Did you remember to change the file extension as well? It can’t be .CSS it has to be .css. The file name has to be styles.css exactly.

OMG! Thanks so much!!! I’ve been working on this for way too long !!

1 Like