Responsive Web Design Projects - Build a Tribute Page

Hey! I’m looking for some help or explanation at least :slight_smile:

I focused on the points of the challenge without any extra details. So far, I have three uncompleted tasks:

  1. Your img element should have a display of block.
  2. Your #image should have a max-width of 100%.
  3. Your #image should be centered within its parent.

I read several related topics and watched videos of other devs, however didn’t find any solution in my case. The most interesting thing is the 3rd uncompleted task! I wrote my code in VS Code and the element is centered in my browser, probably then the issue is not a position.

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tribute Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main">
    <h1 id="title">Name</h1>
    <h4>Professional way</h4>
    <div id="img-div">
        <img id="image" src="https://cdn.pixabay.com/photo/2015/05/14/17/40/red-head-767078_960_720.jpg" alt="" width="600px">
        <figcaption id="img-caption">Add some description</figcaption>
    </div>
    <div id="tribute-info">
        <h2>Here're some crucial moment of the life:</h2>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div >
            <a id="tribute-link" href="#" target="_blank">Significant works</a>
        </div>
    </div>
</main>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}



#img-div {
display: block;
max-width: 100%;
height: auto;
align-content: center;
text-align: center;
}

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

This looks like the wrong filename for your CSS

Well, I usually use this name in my workspace, BUT you’re right! Now I added “s” to the name, so, it’s centered, I see it, however, I still have these tasks uncompleted.

you mean all three you mentioned in the original post? still incomplete?

Yeah, without any changes.
I had some question in mind before, the task: Your #image should have a height of auto is done. So, is it a default feature or what? Because this is a part of styling as well, but it’s completed. Could be a clue…

The thing is: you don’t even have selector for your image.

I see only selector for the wrapper(img-div), not for the picture.

To be honest, I have no idea how I completed this right now.
I tried different selectors, the first option was just img, but it didn’t work for some reason in the browser etc. With the id (#img-div) it looked as it’s in the center at least, I saw some changes.
Using your clue, I changed these parts:

<figure id="img-div">
            <div>
            <img id="image" src="https://cdn.pixabay.com/photo/2015/05/14/17/40/red-head-767078_960_720.jpg" alt="" width="600px">
            </div>
            <figcaption id="img-caption">Add some description</figcaption>
        </figure>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



    img {
    display: block;
    max-width: 100%;
    height: auto;
    align-content: center;
    text-align: center;
    margin: 0 auto;
}

Thanks!