Responsive Web Design Projects - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
Any of you have any advice on how to fix it?

  **Your code so far**
/* file: index.html */
<script src=""></script>

body {
  background-color: black;
  color: white;
  font-family: calibri;

<main id="main">
<h1 id="title"> Prince Stolas </h1>

<div id="img-div">
 <a id="tribute-link" target="_blank" href=""> 
 <img id="image" src="" alt="Picture of Vegeta" img { max-width: 100%; height: auto; }>

 <figcaption id="img-caption"> Stolas is a Goetic Prince of Hell and a major supporting character in Helluva Boss. He is the father of Octavia and the husband of Stella. </figcaption>


<p id="tribute-info"> <b>Stolas abilites:</b>
    <li> Demon transformation </li>
    <li> Petrification </li>
    <li> Telekinesis </li>


/* file: styles.css */
body {
font-family: Arial;

h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;

max-width: 100%;
height: auto;
  **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

I think I see the issue. I’d suggest double-checking both the HTML and the CSS related to the image. If there’s an error with either side of your code, it won’t pass the test. Hopefully you’ll be able to spot the issue yourself, so I won’t give further hints unless you need them!

I think I found an error in the code.

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

Unfortunately, I don’t know how to fix it.

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

This should be declared in the style section as it is the CSS for your img element and not an element attribute

Not working

Ok, I corrected the code and everything works.
I close the topic thanks.

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