Img element display set to block

HTML-CSS
#1

Hey, Iā€™m just tying to tick all the boxes for this challenge before I reformat stuff but its not passing the test that says the display for the img element should be set to block. I know that the #image is already set to flex but idk how to appease both rules. Thanks :slight_smile:

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title id="title">Jacob Collier</title>
  <link rel="stylesheet" href="styles.css">
</head>
<main id="main">
  <div id="img-div">
    <img id="image" src="https://i.scdn.co/image/ab677762000056b8f428c04669c18ff10960eed3">
    <figcaption id="img-caption">picture of jacob collier</figcaption>
  </div>
  <div>
    <p id="tribute-info">info about Jacob Collier</p>
    <p><a href="https://en.wikipedia.org/wiki/Jacob_Collier" id="tribute-link" target="_blank">more info</a></p>
  </div>
</main>
</html>

/* file: styles.css */
#image {
max-width:100%;
height: auto;
display: flex;
justify-content:center;
}

img {
display: block;
}

  **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

#2

Since class selector (#image) has higher specificity than the type selector (img), display:flex takes precedence over display:block in your code when it comes to styling the image. To pass the check, simply remove the display:flex property from #image.

If the reason why you are using flexbox is to centralize the image, you can achieve that by adding the property margin:0 auto as well without using flexbox.

2 Likes