Goodness help me please!

I keep trying to fix it but it keeps saying : Your
img element should have the class
smaller-image" what the heck am I doing wrong???

  **Your code so far**

<img>
<style>  
.smaller-image {
  width: 100px;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}
</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 src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14268.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.111 Safari/537.36

Challenge: Size Your Images

Link to the challenge:

The message is telling you exactly what else you need to do to complete this lesson.
You can revisit this lesson regarding styling an element to refresh yourself.

you should add class=“smaller-image” to your img element.
read instructions one more time and you’ll get it.

i tried and it did not work

What have you tried?
Please show your complete code as it is now.

.smaller-image { width: 100px; }

This is not your complete code. It’s one small snippet.

Your complete code will look like what was pasted at the top of this topic.

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

<img class="smaller image">
<style>
.smaller-image  {
width: 100px;
}
  </style>

it is showing up on my end so i do not know what is going on

Please post your whole code, but anyway 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 (’).

there is missing dash symbol in your class name

you have an img, then a style, then a link, then another style.
probably best to just reset the step to start fresh, then add your new css to the existing style tags (where the other css is)

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