Tribute Page project, media query

Howdy all, I have all of the checkmarks done for the tribute page project, however, it’s giving me trouble on the image resizing objective.

#image {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
height: 400px;
}

this is my code for the image, and below this is the media query:

@media only screen and (max-width: 900px) {
  #image {
    width: 25%;
    height: 300px;
  }
}

the objective states this - 1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

what am I doing wrong?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi @chrisclary20 !

Welcome to the forum!

When working on projects it is always best to share a link to your codepen so people see the error messages.

But just eyeballing it, it looks like you are missing a couple of the css properpties that test is look for here

When a test fails, make sure to read the full error message.
It will tell you what is missing.

Hope that helps!

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