Tribute Page stuck at 9/10

I’m trying to build a tribute page and I’m getting stuck at 9/10 and not sure why I can’t get the last step completed.

Link to my page is here -

Any help is appreciated :slight_smile:

Howdy!

For some reasons I see your website like this:

The problem is the image.

Fix the image link and you must center the img element within its parent element.

On that way, you will improve the quality of your website and also pass the last test.

You got this! :wink:

1 Like

Hi @mattboston !

Welcome to the forum!

If you google, how to center an image css, then you will get the answer you are looking for.

But also, please remove these style tags in your html.

<style>
  body{
    background-color:black;
    color: white;
    font-family: calibri;
  }
</style>

All of your css should be in the css section.

1 Like

Heyy there @mattboston

Here are some considerations to take note of:

  1. The reason your image won’t display is because your image src is missing the = sign and this will cause your links not to be rendered properly, beware of these tiny mistakes they can cost you alot of hours debugging.
    The proper way to reference images using their links is :
    <img src=" link here" alt=" alternate text here">. The image is a self-closing tag so this would do just fine.

  2. You don’t have to limit your image width and height to 20% each as it would be really hard to see especially for people with special needs because making a website accessible to all kinds of users is a developer’s responsibility as well.

  3. In your CSS as you tried to style the image, you were missing some important properties which is why you were stuck at 9/10. If you click on the 9/10 Passed on the tester you’d be able to see what is wrong and how to fix it faster. The requirement was to center the image within it’s parent element but your image was aligned to the left side. You can adjust this by simply adding the position: relative; which tells the CSS the element you’re styling is a child of whichever parent it is nested and then you can also add the margin which controls the distance between the padding of the element and the body of the page or other elements in the page:

#image
 {
    max-width: 100%;
     display: block;
     height: auto;
     margin: 0 auto;
     position: relative;
}

Having your margin at 0 and auto tells the CSS to erase all margin from Top and Bottom and then “Automatically” align the Left and Right so they can be equal and this helps to center elements in your HTML.

You can visit this link to learn more about CSS Margins and this to learn about the CSS Layout - The position Property

I hope this helps. :grinning:

1 Like

Thank you so much! Got it!

Thank you :slight_smile: I got it!

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