Tribute Page: Code seems to be good but not working ¯\_(ツ)_/¯

HTML-CSS
1

Hello, I’m stuck on this cert project. I get these 3 errors ,

  • Failed:Your img element should have a display of block.
  • Failed:Your #image should have a max-width of 100%.
  • Failed:Your #image should be centered within its parent.

here is my code:
img {
max-width: 100%;
display: block;
margin: 0 auto;
height: auto;
}
what am I doing wrong? I’ve been stuck on this for over 2 weeks.

2

for the #image issues you need to create a selector that actually targets #image

As for the other issue, you will have to share the full code for your index.html and styles.css for further help with that.

1 Like
3 
<DOCTYPE! html>
<main id="main">
  <h1 id="title">Domingo Guillen</h1>
  <p>The man who had infinate patience</p>
  <figure id="img-div">
    <img
      id="image"
      src="../Bimbo.JPG"
      alt="Bimbo y Chicha"
  
    >
    <img id="image">
    <figcaption id="img-caption">
      Bimbo y Chicha sonriendo
    </figcaption>
  </figure>
  <section id="tribute-info">
    <h3 id="headline">Bimbo's Timeline:</h3>
    <ul>
      <li><strong>1942</strong> - Born in Republica Dominicana</li>
      <li>
        <strong>1988</strong> - Leaves his farm in Sainagua Dominican Republic to come to the USA
      </li>
      <li>
        <strong>2021</strong> - Passed Away
      </li>
    </ul>
    
      <p>
        Bimbo didn't say much but he made it his voice heard.
      </p>
      
    <h3>
We love & miss you.
      <a
        id="tribute-link"
        href="https://en.wikipedia.org/wiki/Dominican_Republic"
        target="_blank"
        >Wikipedia entry</a
      >.
    </h3>
  </section>
</main>

HTML-CSS

html {
  
  font-size: 10px;
}

body {
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}


  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }



h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}


  

img {
  

  max-width: 100%;
  display: block;
  justify-content: center;
  margin: auto;  
  padding: auto;
  height: auto;
  }


#img-div {
  background: white;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
}


  #img-caption {
    font-size: 1.4rem;
  }


#headline {
  margin: 50px 0;
  text-align: center;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}
4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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 (').

7

you need to write a #image selector to get these two tests to pass.

you should delete this also as this line does nothing and confuses the test as it has the same id as the real img

this is also wrong
<!DOCTYPE html> is the correct way to write it

8

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