Need help on where to place smaller image tag

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

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

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

Challenge: Size Your Images

Link to the challenge:

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.


The lesson tasked you with doing two things;

  1. creating a class called smaller-image
  2. use it to resize the image

The failing message says;
Your img element should have the class smaller-image.

On a side note, you cannot call the class within another class.
You need to create the .smaller-image class selector on its own.

i did that and it did not work

Please show your current code.

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

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

  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>

I had to format your code. Please review the instructions on how to post your code paying attention to ** Note: Backticks (`) are not single quotes (’).**

The code you’ve just posted is the same as the code you posted when you first asked about the issue.
My response will be the same unless there is something specific you do not understand.

It would be best if you started fresh.
Use the ‘Reset All Code’ button to reset the lesson and then follow each of the steps in the lesson.

sorry, I could not see what the backticks actually were .

& I am not understanding what I am doing wrong for the smaller image code. I thought I did it just how you showed me to and created a separate class, maybe I am understanding it wrong

The code you most recently posted is the same as the code you posted when you originally opened the topic.
That is why I said to use the Reset All Code button so you could start fresh.

I haven’t showed you how to do anything. I just restated the lesson and added that you cannot call a class within another class. That mean this

.red-text {
    color: red;
    .smaller-image: { width: 100px;}
  }

from your code is incorrect.
The .smaller-image selector needs to be on it’s own. Not within the .red-text selector.
The only thing that goes in a CSS selector is a property: value; pair.

The lesson also wants you to add the class to the img element. That hasn’t been done yet.
You can revisit this lesson to refresh yourself on how to add a class attribute to an element.

I figured it out.

Thank you!

1 Like