Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Not sure what I have to do satisfy these three:
(1) Your img element should have a display of block .
(2) Your #image should have a max-width of 100%.
(3) Image should be centered.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">

<main id=main>
  <div id=img-div>
    
    <div>
        <div id=img-caption>
          <img id=image src="https://i.pinimg.com/736x/a3/c2/6c/a3c26c173f6a317431b2ddd586f8b10a.jpg">
            <image>
              <id id=title>Naruto</id>
            </image>
          </img>
        </div>
    </div>

    <div id=tribute-info>
      <id id=subtitle>Chapter 1</id>
    </div>

    <a id=tribute-link href target=_blank></a>
  </div>
</main>





/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi there!
Please also share your styles

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

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

aren’t you missing something here?

please review this lesson https://www.freecodecamp.org/learn/full-stack-developer/lecture-understanding-the-html-boilerplate/what-is-an-html-boilerplate

4

Refer below:

<!-- file: index.html -->
<!DOCTYPE html>

<link rel="stylesheet" href="styles.css">

<!-- NTS: Something is missing here apparently-->

<main id=main>
  <div id=img-div>
    
    <div>
        <div id=img-caption>
          <img id=image src="https://i.pinimg.com/736x/a3/c2/6c/a3c26c173f6a317431b2ddd586f8b10a.jpg">
            <image>
              <id id=title>Naruto</id>
            </image>
          </img>
        </div>
    </div>

    <div id=tribute-info>
      <id id=subtitle>Chapter 1</id>
    </div>

    <a id=tribute-link href target=_blank></a>
  </div>
</main>
</html>

Thanks for the heads up!

5

Thanks, but I mean we need your full detalied styles

6 
img {
  display: block; /* Makes the image a block-level element */
  max-width: 100%; /* Ensures the image doesn't exceed its parent's width */
  height: auto; /* Maintains the image's aspect ratio */
  margin-left: auto; /* Centers the image horizontally */
  margin-right: auto; /* Centers the image horizontally */
}```
7

Your HTML with these styles works from my end

Please try one of the following steps to move forward.

Click on the “Reset” step button and force a refresh of your page with CTRL + F5 if you’re on Windows then try to paste the code in again. On other systems, please follow the instructions here.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

or - Turn off high contrast themes on Windows (from accessibility settings menu)

I hope one of these will work for you.

1 Like
8

Yup, got it to work.
Thanks for stepping in. Appreciate it.

1 Like
9

<id id="title">Naruto</id>

You have a problem here with this HTML tag because this id thing doesnt exist as a tag

1 Like
10

use display property

11

Hello, what helped you pass the tests? I have the same problem as you had, except that I found that when I run the tests in Chrome, the last (19th about centering the image) test works, but on the 16th and 17th (about the display of block and the max-width of 100%)

12

Nevermind, it’s working already

13

In the future, please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Ask for Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.

Thank you.

1 Like