This has got to be a browser issue. (?) smaller-image

still says "your img element should have the class “smaller-image”.

<style>

  .red-text {

    color: red;

  }

  h2 {

    font-family: Lobster, monospace;

  }

  p {

    font-size: 16px;

    font-family: monospace;

  }

  .smaller-image {

    width:100px;

  }

</style>

<h2 class="red-text">CatPhotoApp</h2>

<main>

  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

You need to wrap your HTML code in triple back ticks so we can see the actual code. Put three back ticks on a line by themselves (the back tick is located in the upper left corner of my keyboard just below the Esc key). Then put your code underneath. Then on a new line below your code add three more back ticks.

But looking at your code in dev tools, it doesn’t look like you have added the ‘smaller-image’ class to the image.

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 (’).

It looks like you may have copied an old answer you found somewhere for the challenge. These challenges get updated from time to time, so copying old code you find can result in failing tests. I’d reset the challenge and only make the requested changes.

1 Like