Resizing an img element relative to its parent

[NadiaM]

Tell us what’s happening:
Im really not sure what Im doing wrong here but my image wont move no matter what I do. Any ideas?

Your code so far

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

WNRXQgd

[jsdisco]

You’re targeting a class .img in your CSS, but you have no such class in your HTML, only a div with id=img-div and the image with id=image. Which would be targeted like this, since it’s an id and not a class:

#image {
  width:100%;
}

[NadiaM]

Thank you for the info, I think I understand. I need to a class to use .img in CSS. How do I change it to a class? if that possible, and why does it make such a difference?

[jsdisco]

It’s basically up to you whether you want to give an element a class or an id, but in this case, you’re supposed to follow the user stories:

Within the “img-div” element, I should see an element with a corresponding id=“image”.

Generally, an id must always be unique, you can only have one id per HTML page, but you can have multiple classes. Here’s an example, where the <nav> has a unique id, and the <li> tags all have the same class:

<nav id="navbar">
  <li class="nav-li"><a href="#section-1">Link 1</a></li>
  <li class="nav-li"><a href="#section-2">Link 2</a></li>
  <li class="nav-li"><a href="#section-3">Link 3</a></li>
</nav>

This is convenient because now you can style all the <li> tags within the nav by using the class selector:

.nav-li {
  padding:10px;
}