Tribute Page: Build a Tribute Page

Hi,
I have scoured the forum and tried the various fixes people have suggested on other threads, but could I am struggling to rectify these errors on my tribute page:

  • Your img element should have a display of block.
  • Your #image should have a max-width of 100%
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
<main id="main">
  <h1>Mint Generation</h1>
    <div id="img-div">
      <img id="image" src="https://64.media.tumblr.com/16ddbc81c9177c5440280fa488989e9f/ tumblr_pcz1ub1vOe1xwex0co1_1280.jpg" alt="a photographic of the mint generation rules" />
      <i><figcaption id="img-caption">The Mint Gen Rules</figcaption></i>
    </div>
  <h2 id="tribute-info">A Bit about the Challenge: </h2>
    <p>The Not So Berry Challenge was launched by LilSimsie in 2017 and has been a well-run legacy type challange for simmers to add another dimension to their gameplay as it is a multi-generational challenge.</p>
    <p>This challenge has inspired many other generational type challenges with a similar type of vein but each additonal creator has added their own twist.</p>
    <p>To find out more about the challenge, and the original creator LilSimsie, check out this page <a id="tribute-link" target="_blank" href="https://snootysims.com/wiki/sims-4/the-sims-4-not-so-berry-challenge/">Not So Berry Challenge</a></p>
</main>
main {
  font-family: sans-serif;
  text-align: center;
}


h1 {
  text-align: center;
}

.img-div {
  display: block;
}

image {
  display: block;
  max-width: 100%;
  height: auto;
}

figcaption {
  text-align: right;
}

h2 {
  text-align: center;
}

p {
  text-align: justify;
}

Any help would be greatly appreciated as I think I have been trying to figure it out for so long by myself that I cannot see what the issue could be.

Thank you

1 Like

Hello and welcome to the community :smiley:!

Should target your actual img element not its surrounding div:

img{}

And target your image id by using the #image selector to set your max-width to 100%:

#image{ }
1 Like

Thank you so much! Such a simple thing I was missing and it was literally a # !

2 Likes

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