Add the img element to use the class "smaller-image

Tell us what’s happening:
Describe your issue in detail here.
The omg element should have the class “smaller-image”
Not getting that

  **Your code so far**

<style>
.smaller-image {
  width: 100px;
}
<img class:"smaller-image"></img>
</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 (Linux; Android 10; CPH2185) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36

Challenge: Size Your Images

Link to the challenge:

Hello @Abiola

When assigning a class to a HTML element, use the = sign and not :

You are required to give the img element a class of small-image like below:

You cannot have this inside a style tag. Inside the style tag you write the styles (CSS) for your HTML elements by referencing them in various ways. For example, here you reference the img using its class name to style it inside the tags:

.small-image {
width: 100px;
}

I’ve corrected that but it’s still not correct

The class is smaller-image Please correct that.

I’ve corrected it and it’s still the same🥺

Please share your code. What test is not passing? What is the message printed on the console when you run the tests?

I already did the other one “the image should be 100px wide”
It’s the first one “the image element should have the class smaller-image” that’s the message

Ok. Here are the possible areas you might be missing something:

The img element should have a class=“smaller-image” .

In your style you should have this:

.smaller-image {
width: 100px
}

Oh, I see your issue. You are not required to create another img element. You should give the existing img the class="smaller-image"

The one on line 24.

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