Tribute Page - Build a Tribute Page

HTML-CSS
1

I can’t figure out the last few. It’s saying it should have a max width of 100, display block, and be centered within parent.

Your code so far

<!-- file: index.html -->
<main id="main">
<a id="title">Tribute Page</a>
<div id="img-div"><div id="img-caption">Caption</div>
<img id="image"></img></div>
<a id="tribute-info">Info</div>
<a id="tribute-link" href="https://tribute-page.freecodecamp.rocks. " target="_blank"></a>
</main>

/* file: styles.css */
img {
  display: block;
}

#image {
  max-width: 100%;
  height: 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

I think you have the display: block; and max-width: 100%; correct, but you still need something to center your image in the img selector. I used margins.

3

It still says all of them are wrong even when I put that just now

4

in the div parent try display flex then align items center
don’t forget to set flex direction …

5

Sorry I couldn’t be of help! I hope someone with more experience will be able to steer you in the right direction.

6

I added align items only to the img selector but I’m not sure what to do after

7

#img-div is the parent element that i’m talking about not #image
you want your image to be centered inside the div parent
inside it add align items property and value center after you set the display to flex and flex direction to column

8

Screenshot 2024-02-03 232025

Still not working, this is what I’ve done

9

Hello!

I got your code to work by

  • adding <link rel="stylesheet" href="styles.css"/> to your HTML
  • adding margin: 0 auto to your img element

Give it a try!

3 Likes
10

can you tell me the diffrence between #image and img selector?
and do you see the img-div i’m talking about

<div id="img-div">
  <div id="img-caption">Caption</div>
  <img id="image"></img>
</div>

if you see it now go back to your styles.css file and target the img-div instead, i hope this can help

11

Your whole html file is wrong, you need to correct your html file first. If you don’t know, start again from cat photos app challenge.
@daphne

12 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your Title Here</title>
    <!-- Your CSS links or styles go here -->
</head>
<body>
    <!-- Your content goes here -->
    <h1>Hello, world!</h1>
    
    
</body>
</html>

Above is the boilerplate for starting a project.

13

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