Responsively resize images

Tell us what’s happening:

My apologizes, I’m new to coding and feel like this should be rather easy. However, I just cannot get this last test to pass. It’s making the image responsively resize.

Your code so far

<body id="main">
  <h1 id="title">Vlad The Impaler</h1>
  <div id="img-div">
  <img id="image" src="https://vignette.wikia.nocookie.net/vampires/images/f/f2/B74cafc41bcb31f3e435dbf2a9fffa7a--vlad-the-impaler-vlad-tepes.jpg">
    <div id="img-caption">
      <p>A rendering of Vlad the Impaler</p>
    </div>
  </div>

(CSS)

#title{
text-align: center;
}

#img-div{
text-align: center;
}

img {
max-width: 100%;
height: auto;
}

I’ve seen this issue around a few places, but never really seemed to be able to find an answer. What am I missing? Thanks in advance!

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

No need to apologize, coding is a learning process. Welcome to the forum!

When you’re coding in Codepen, it automatically generates the boilerplate code, so it has already generated the

<html>
  <head>
  </head>
  <body>
    <!-- This is where your code goes -->
  </body>
</html>

With that I suggest you change your body id="main" to main id="main"

as for the issue with your image being responsive, it wants your image to be responsive to the width of the parent element.
I’ll give you a hint and say that your solution can be found with one of these display properties.
https://www.w3schools.com/cssref/pr_class_display.asp

2 Likes