Tribute Page - Build a Tribute Page *CSS Issues*

HTML-CSS
1

Tell us what’s happening:

I swear I wrote the CSS portion as directed, but when I run the tests, I’m told that these three steps were not done correctly:

  • Your img element should have a display of block.

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

  • Your #image should be centered within its parent.

Please help me figure out why I’m being told I did this incorrectly as I would like to move on from this chapter. T_T

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"
<link rel="stylesheet" href="styles.css">
<body>
<main id="main">
  <title id="title">Levi Ackerman</title>
  <h1>Levi Ackerman</h1>
  <figure id="img-div">
    <img id="image" src="https://pbs.twimg.com/media/FMArG63WYAEUwpQ?format=jpg&name=4096x4096">
    <div id="img-caption">Official art by Isayama.</div>
  </figure>
  <div id="tribute-info">Humanity's strongest soldier.</div>
  <a id="tribute-link" href="https://attackontitan.fandom.com/wiki/Levi_Ackerman" target="_blank">Wiki</a>
</main>
</body>
</html>

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

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

such a small slipup. You removed somehow the > in first line.

1 Like
3

Hi @ spark02,
The following are issues found in your code:

  • Missing Head Tag:
    Issue: <html lang="en"
  • Missing Head Tag Closure.
  • Invalid Link Tag Placement:
    Issue: <link rel="stylesheet" href="styles.css">
    The link tag should be placed within the head section.
1 Like
4

@spark02 following the @MilesWeb’s post, also you need id #image selector and a separate img selector for CSS styling. in the img selector you need display block and in id #image selector you need max-width 100% and margin 0 auto.

1 Like
5

wowwwww I feel so silly. :joy: Thank you so much!!!

6

Hi Miles, thank you so much!! I’ll take note of these pointers, appreciate it! :blush:

7

Thank you!! I appreciate your insight. :blush:

8

Your welcome. Happy Coding!

9

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