Your img element should have a display of block 2

HTML-CSS
#1

Tell us what’s happening:

I have an img selector and inside I have the display set to block, but it doesn’t pass the test saying that my img should have a display of block. I tried using the #main class to select the #image element but it didn’t work either.

  **Your code so far**

/* file: index.html */
<main id="main">
<title id="title">GM Alexandra Kosteniuk </title> 
<figure id="img-div">
  <img id="image" src="https://image-cdn.essentiallysports.com/wp-content/uploads/Alexandra-Kosteniuk.jpg"></img> 
  <figcaption id="img-caption">chessqueen</figcaption>
</figure>

<text id="tribute-info">April 23, 1984: birthday</text>

<a href="https://www.chess.com/players/alexandra-kosteniuk" target="_blank" id="tribute-link"></a>
</main>

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

#main #image {
max-width: 100%; 
max-height: 80%; 
margin-left: auto;
margin-right: auto;
height: auto; 
}

#main #img-div {

}

#main #img-caption {

}

#main #tribute-info {

}

#main #tribute-link {

}

  **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

#2

Create a class inside the figure and give the name of that class after using that class name you can run your program

#3

I added the class=“gm” and used the
.gm {
display: block;
}
rule but the test still fails.

#4

Still having the issue, no image selectors are working, and all of the five previous posts on this topic do not have working solutions.

#5

I am not using display: flex anywhere

#6

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